/* The account menu (views/common/includes/accountMenu), the You Exec shared menu of the Margin "my projects" design:
   its tokens, the element resets and the account button with its menu. Loaded by the Shards pages before topnav.css
   and by the v2 shell next to chrome.css, so the one include looks the same in both headers. Margin carries the same
   rules in frontend/components/AccountMenu, keep the two alike */

:root{
  --yx-s1:4px;--yx-s2:8px;--yx-s3:12px;--yx-s4:16px;--yx-s5:24px;--yx-s6:32px;
  --yx-bg:#FFFFFF;--yx-surface:#FFFFFF;--yx-card:#F3F4F7;--yx-card-hover:#ECEEF2;--yx-line:#E3E5EA;
  --yx-text:#14161C;--yx-text-2:#4A4F5C;--yx-text-3:#626877;
  --yx-brand:#006EDB;
  --yx-blue:#1D4ED8;--yx-blue-bg:#E6EEFF;
  --yx-danger:#C0262D;--yx-danger-bg:#FDECEC;
  --yx-pro:#F5A300;--yx-pro-soft:#FFF4DC;
  --yx-shadow:0 16px 40px rgba(20,22,28,.14);
  --yx-ease:cubic-bezier(.2,.7,.2,1);
  --yx-gutter:clamp(16px,2.2vw,32px);
  /* As wide as Margin's bar (its dashboard is 1680px too), so the one header reads the same width in both apps */
  --yx-wrap:1680px;
}

/* Resets against the page's own element rules (Bootstrap on the Shards pages, base.css on the v2 pages), kept at
   element specificity (:where) so every yx- class wins over them */
:where(.yx-wrap, .yx-acct-wrap) a{text-decoration:none;color:inherit}
/* Bootstrap colours every link blue on hover (a:hover, 0,1,1): the header's links keep their own colour, the ones
   that change on hover say so themselves */
:where(.yx-wrap, .yx-acct-wrap) a:hover{color:inherit}
:where(.yx-wrap, .yx-acct-wrap) button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;margin:0;line-height:inherit}
:where(.yx-wrap, .yx-acct-wrap) svg{display:block}
:where(.yx-wrap, .yx-acct-wrap) b{font-weight:600}
/* The app marks (views/common/v2/mark) carry the class "mark", which Bootstrap also uses for highlighted text: a
   cream background and padding. Nowhere in plus is a mark highlighted text */
svg.mark{padding:0;background:none}

.yx-chev{color:var(--yx-text-3);transition:transform .15s;flex:none}
[aria-expanded="true"] > .yx-chev{transform:rotate(180deg)}

/* ---------- Account ---------- */
.yx-acct-wrap{position:relative}
.yx-account{display:flex;align-items:center;gap:var(--yx-s2);padding:var(--yx-s1) var(--yx-s2) var(--yx-s1) var(--yx-s1);border-radius:999px}
.yx-account:hover,.yx-account[aria-expanded="true"]{background:var(--yx-card)}
.yx-acct-name{font-weight:600;font-size:15px;white-space:nowrap}
.yx-acct-av{position:relative;display:block;width:36px;height:36px}
.yx-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--yx-blue-bg);color:var(--yx-blue);font-size:15px;font-weight:700;object-fit:cover;flex:none;overflow:hidden}
.yx-avatar--lg{width:40px;height:40px;font-size:16px}

/* ---------- Account menu (You Exec shared menu) ---------- */
.yx-acct-menu{position:absolute;right: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-s1);z-index:50;display:none;color:var(--yx-text)}
.yx-acct-menu.open{display:block}
.yx-m-head{display:flex;gap:var(--yx-s3);align-items:center;padding:var(--yx-s3) var(--yx-s2)}
.yx-m-head > div{min-width:0}
.yx-m-head b{display:block;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yx-m-head small{display:block;font-size:13px;color:var(--yx-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yx-theme-ico{margin-left:auto;align-self:flex-start;width:32px;height:32px;border-radius:50%;border:1px solid var(--yx-line);background:var(--yx-surface);
              color:var(--yx-text-2);display:grid;place-items:center;flex:none}
.yx-theme-ico:hover{background:var(--yx-card);color:var(--yx-text)}
.yx-m-plan{margin:0 var(--yx-s1) var(--yx-s1);padding:10px var(--yx-s3);min-height:44px;border-radius:10px;background:var(--yx-pro-soft);display:flex;align-items:center;justify-content:space-between;gap:var(--yx-s2);font-size:13px;color:var(--yx-text-2)}
.yx-m-plan b{color:var(--yx-text);font-weight:700}
.yx-m-plan--free{background:var(--yx-blue-bg)}
.yx-m-manage{color:var(--yx-text);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.yx-m-manage:hover{text-decoration:underline}
/* filled by the bloom of v2/bloom.css */
.yx-m-upg{color:#1B1300;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.yx-m-upg:hover{color:#1B1300}
.yx-m-sep{height:1px;background:var(--yx-line);margin:var(--yx-s1) var(--yx-s1)}
.yx-m-item{width:100%;display:flex;align-items:center;gap:var(--yx-s3);height:38px;padding:0 var(--yx-s2);border-radius:8px;font-size:14px;font-weight:500;color:var(--yx-text);text-align:left}
.yx-m-item:hover{background:var(--yx-card);color:var(--yx-text)}
.yx-m-item svg{color:var(--yx-text-3);flex:none}
.yx-m-item .yx-app-logo{width:18px;height:18px;flex:none;display:grid;place-items:center}
.yx-m-item .yx-app-logo .mark{width:16px;height:16px;color:inherit}
.yx-m-item--danger,.yx-m-item--danger svg{color:var(--yx-danger)}
.yx-m-item--danger:hover{background:var(--yx-danger-bg);color:var(--yx-danger)}

/* ---------- Phones ---------- */
@media (max-width:760px){
  .yx-acct-name{display:none}
  .yx-account{padding-right:var(--yx-s1)}
  .yx-acct-menu{width:min(300px,calc(100vw - 2 * var(--yx-gutter)))}
}