/* Header of the Shards pages (views/common/includes/header): 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}
.yx-switcher:hover,.yx-switcher[aria-expanded="true"]{background:var(--yx-card)}
/* The lockups (common/v2/lockup) are sized by --brand-h, 22px here; their rules are in v2/marks.css, which shards loads for both headers */
.yx-sw-slash{font-size:22px;font-weight:300;color:var(--yx-line);margin:0 4px}
.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 */
.yx-pro-btn{display:inline-flex;align-items:center;height:36px;padding:0 var(--yx-s4);border-radius:999px;background:var(--yx-pro);color:#1B1300;font-size:13px;font-weight:700;white-space:nowrap}
.yx-pro-btn:hover{filter:brightness(1.05);color:#1B1300}

/* ---------- Notice bar (important account message) ---------- */
.yx-notice{--c:#F59E0B;display:flex;align-items:center;gap:var(--yx-s3);margin-top:var(--yx-s4);padding:10px var(--yx-s2) 10px var(--yx-s4);
           border-radius:14px;background:color-mix(in srgb,var(--c) 12%,var(--yx-surface));color:var(--yx-text);font-size:14px;line-height:1.45}
.yx-notice--danger{--c:#D93025}
.yx-notice-ico{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
               color:color-mix(in srgb,var(--c) 70%,#14161C);background:color-mix(in srgb,var(--c) 22%,var(--yx-surface))}
.yx-notice-txt{flex:1;min-width:0;margin:0;color:var(--yx-text-2)}
.yx-notice-txt b{color:var(--yx-text);font-weight:600}
.yx-notice-cta{flex:none;height:34px;display:inline-flex;align-items:center;padding:0 var(--yx-s3);border-radius:10px;font-weight:600;font-size:14px;color:#fff;background:var(--c)}
.yx-notice-cta:hover{filter:brightness(1.05);color:#fff}

/* ---------- Phones ---------- */
/* The bar wraps: switcher and account on the first row, the app's links on their own row under them. The You Exec
   wordmark and the slash go, the mark stays */
@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-lockup:first-child .wordmark,.yx-sw-slash{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)))}
  .yx-notice{flex-wrap:wrap;align-items:flex-start;padding:var(--yx-s3)}
  .yx-notice-txt{flex:1 1 calc(100% - 90px)}
  .yx-notice-cta{margin-left:44px}
}
/* 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)}
}