/* 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);
  --yx-wrap:1440px;
}

/* 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}
: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}

.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}
.yx-m-upg{background:var(--yx-pro);color:#1B1300;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.yx-m-upg:hover{filter:brightness(1.05);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)))}
}