/* JatimSatu ID -- Phase B header account icon + dropdown.
   Loaded sitewide (unlike jatimsatu-id.css, which is scoped to the 4
   account pages only) -- kept intentionally tiny. Mirrors the existing
   .jsn-search-toggle pattern's sizing/tokens for visual consistency. */

.jsn-account{ position:relative; display:flex; align-items:center; }

.jsn-account-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	background:none;
	border:0;
	padding:0;
	margin:0;
	cursor:pointer;
	color:var(--color-on-dark);
	transition:color var(--transition-fast);
}
.jsn-account-icon:hover{ color:var(--color-red); }
.jsn-account-icon:focus-visible{ outline:2px solid var(--color-red); outline-offset:2px; }
.jsn-account-icon--in{ color:var(--color-red); }

.jsn-account-menu{
	position:absolute;
	right:0;
	top:100%;
	margin-top:var(--space-2);
	min-width:220px;
	background:var(--color-charcoal);
	border:1px solid var(--color-on-dark-rule);
	border-radius:var(--radius-sm);
	box-shadow:0 8px 24px rgba(0,0,0,.35);
	z-index:41;
	padding:var(--space-2) 0;
}
.jsn-account-menu[hidden]{ display:none; }

.jsn-account-menu-header{
	padding:var(--space-2) var(--space-4);
	font-family:var(--font-mono);
	font-size:11.5px;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--color-on-dark-muted);
	border-bottom:1px solid var(--color-on-dark-rule);
	margin-bottom:var(--space-1);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.jsn-account-menu-item{
	display:flex;
	align-items:center;
	gap:var(--space-2);
	padding:var(--space-2) var(--space-4);
	min-height:44px;
	box-sizing:border-box;
	font-family:var(--font-body);
	font-size:14px;
	color:var(--color-on-dark);
	text-decoration:none;
}
.jsn-account-menu-item:hover{ background:rgba(255,255,255,.06); color:var(--color-red); }
.jsn-account-menu-item svg{ flex:0 0 auto; opacity:.8; }

.jsn-account-menu-divider{
	height:1px;
	background:var(--color-on-dark-rule);
	margin:var(--space-1) 0;
}