/* Header of the Shards pages (views/common/includes/inAppHeader): the You Exec app header of the Margin "my projects"
   design, its classes with a yx- prefix so nothing of Bootstrap or main.css leaks in. The tokens, the resets and the
   account menu are account-menu.css, loaded before this one, the category belt under the header is category-belt.css.
   Margin carries the same rules in its Navigation styles, keep the two alike */


.yx-wrap{max-width:var(--yx-wrap);margin:0 auto;padding:0 var(--yx-gutter);position:relative;z-index:1000}

/* ---------- Top bar ---------- */
.yx-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--yx-s5) 0;color:var(--yx-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.yx-top-actions{justify-self:end;display:flex;align-items:center;gap:var(--yx-s4)}

/* ---------- App switcher ---------- */
.yx-switch-wrap{position:relative;justify-self:start}
.yx-switcher{display:flex;align-items:center;gap:var(--yx-s2);height:44px;padding:0 var(--yx-s3) 0 var(--yx-s2);margin-left:calc(-1 * var(--yx-s2));border-radius:12px;--brand-h:22px}
.yx-switcher:hover,.yx-switcher[aria-expanded="true"]{background:var(--yx-card)}
/* The You Exec X alone (common/v2/mark, as on the landing), then the Templates lockup (common/v2/lockup), both sized by
   --brand-h; the lockup rules are in v2/marks.css, which shards loads for both headers */
.yx-switcher > .mark{flex:none;width:var(--brand-h);height:var(--brand-h)}
.yx-sw-div{flex:none;width:1px;height:20px;margin:0 6px;background:var(--yx-line);border-radius:1px;transform:rotate(20deg)}
.yx-launcher{position:absolute;left:0;top:calc(100% + var(--yx-s2));width:300px;background:var(--yx-surface);border:1px solid var(--yx-line);border-radius:14px;
             box-shadow:var(--yx-shadow);padding:var(--yx-s2);z-index:50;display:none}
.yx-launcher.open{display:block}
.yx-l-apps{display:flex;flex-direction:column;gap:2px}
.yx-l-app{display:flex;align-items:center;gap:var(--yx-s3);padding:var(--yx-s2);border-radius:10px;text-align:left;width:100%;color:var(--yx-text)}
.yx-l-app:hover{background:var(--yx-card)}
.yx-l-app--cur{background:var(--yx-card)}
.yx-l-app--soon{opacity:.6;cursor:default}
.yx-l-app--soon:hover{background:none}
.yx-l-ico{width:28px;height:28px;display:grid;place-items:center;flex:none}
.yx-l-ico .mark{width:26px;height:26px}
.yx-l-txt{flex:1;min-width:0}
.yx-l-txt b{display:block;font-size:14px;font-weight:600}
.yx-l-txt small{display:block;font-size:12px;color:var(--yx-text-3)}
.yx-l-tag{font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:6px;background:var(--yx-card);color:var(--yx-text-3)}
.yx-l-check{color:var(--yx-brand);flex:none}
.yx-l-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--yx-s2);padding:var(--yx-s3) var(--yx-s2) var(--yx-s1);border-top:1px solid var(--yx-line);font-size:13px;color:var(--yx-text-3)}
.yx-l-foot a{color:var(--yx-brand);font-weight:600}
.yx-l-foot a:hover{text-decoration:underline}

/* ---------- App links ---------- */
.yx-appnav{display:flex;gap:var(--yx-s1)}
.yx-appnav a{height:40px;display:flex;align-items:center;padding:0 var(--yx-s4);border-radius:10px;font-size:15px;font-weight:600;color:var(--yx-text-3);white-space:nowrap}
.yx-appnav a:hover{color:var(--yx-text);background:var(--yx-card)}
.yx-appnav a[aria-current="page"]{color:var(--yx-text);background:var(--yx-card)}

/* Pro, the yellow pill of the plan block, in the bar for an account that has it to buy. Filled by the bloom of v2/bloom.css */
.yx-pro-btn{display:inline-flex;align-items:center;height:36px;padding:0 var(--yx-s4);border-radius:999px;color:#1B1300;font-size:13px;font-weight:700;white-space:nowrap}
.yx-pro-btn:hover{color:#1B1300}

/* The account locked card over the bar (common/includes/accountLockedBar) is common/account-locked.css, the v2 header
   shows the same one */

/* ---------- Phones ---------- */
/* The bar wraps: switcher and account on the first row, the app's links on their own row under them */
@media (max-width:760px){
  .yx-topbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--yx-s2) var(--yx-s3);padding:var(--yx-s4) 0}
  .yx-topbar > .yx-appnav{order:3;width:100%;overflow-x:auto;scrollbar-width:none}
  .yx-topbar > .yx-appnav::-webkit-scrollbar{display:none}
  .yx-switcher{--brand-h:20px}
  .yx-top-actions{gap:var(--yx-s2)}
  .yx-appnav--auth a{padding:0 var(--yx-s3)}
  .yx-launcher{width:min(300px,calc(100vw - 2 * var(--yx-gutter)))}
}
/* Narrow phones: the marks alone in the switcher, and a visitor keeps Log in and Sign up over the Pro pill */
@media (max-width:480px){
  .yx-switcher .wordmark{display:none}
  .yx-appnav--auth + .yx-pro-btn{display:none}
  .yx-appnav--auth a{padding:0 var(--yx-s2)}
}