/* Root */
.jkm{position:relative;display:inline-flex;align-items:center;gap:.5rem}
.jkm *{box-sizing:border-box}
.jkm__t{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent !important;
    color: #587089 !important;
    padding: .25rem .5rem;
    cursor: pointer;
    line-height: 1;
    border-radius: .6rem;
    max-width: 220px;
    overflow: hidden;
}
.jkm__t:focus{outline:2px solid var(--global-palette-5, #3b82f6);outline-offset:2px}
.jkm__ico{display:inline-flex}
.jkm__av{border-radius:999px;inline-size:28px;block-size:28px}
.jkm__name,.jkm__label{font-size:.95rem;white-space:nowrap}

/* Menu */
.jkm__m{
    position: absolute;
    top: 2em;
    inset-inline-end: 0;
    margin-block-start: .5rem;
    min-inline-size: 240px;
    background: var(--jkm-bg, var(--global-palette-1, #fff));
    color: var(--jkm-fg, inherit);
    border: 1px solid var(--global-palette-3, #e5e7eb);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    border-radius: .8rem;
    padding: .75rem;
    z-index: 999;
    width: max-content;
    max-width: 350px;
}
	
@media (prefers-reduced-motion:no-preference){.jkm__m{transition:opacity .15s ease, transform .15s ease}}
.jkm__m[hidden]{display:block;opacity:0;transform:translateY(-6px);pointer-events:none}

.jkm__who{display:flex;align-items:center;gap:.5rem;margin-block-end:.5rem}
.jkm__who__name{font-weight:600}
.jkm__sep{height:1px;background:var(--global-palette-3,#e5e7eb);margin:.5rem 0}
.jkm-list{list-style:none;margin:0;padding:0}
.jkm-list li{margin:0;padding:0}
.jkm-list a{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:.5rem;text-decoration:none;color:inherit}
.jkm-list a:hover{background:rgba(0,0,0,.04)}
.jkm__logout{margin:0}
.jkm__btn{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	padding:.5rem;
	border-radius:.6rem;
	text-decoration:none;
	color:#fff;
}
.jkm__btn:hover{opacity:.9}

/* Compact on small screens */
@media (max-width: 768px){
  .jkm__name,.jkm__label{display:none}
}

/* Dark mode fallback */
@media (prefers-color-scheme: dark){
  .jkm__m{
  	--jkm-bg:#4d535ef0;
  	--jkm-fg:#e5e7eb;
  	border-color:#374151
  }
  .jkm-list a:hover{background:rgba(255,255,255,.06)}
}