/* You slice — owned by the YOU slice.
 * Compact top-left identity (small avatar), and the legible photo/sign-out tools.
 * Loaded after styles.css; overrides base .profile-head / .photo-tools. */

/* Compact, left-aligned identity: small live avatar + name beside it. */
.profile-id {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 2px 4px;
	text-align: left;
}
.profile-id .share-btn {
	margin-left: auto;
	flex: none;
}
.profile-id .avatar-stage.mini {
	width: 52px;
	height: 52px;
	margin: 0;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6);
}
.profile-id-name {
	font-family: var(--display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Photo tools + sign out: legible solid-ish buttons over the translucent surface. */
.photo-tools {
	display: grid;
	gap: 10px;
}
.btn.photo-btn,
.btn.signout-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Stronger fill + border than the base ghost so they stay readable on glass. */
	background: rgba(44, 32, 89, 0.82);
	border: 1px solid var(--line2);
	color: var(--fg);
	font-weight: 700;
	box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.75);
}
.btn.photo-btn {
	cursor: pointer;
}
.btn.signout-btn {
	margin-top: 22px;
	border-color: rgba(255, 93, 143, 0.5);
	color: #ffb6ca;
}