/*
 * Shared avatar dropdown menu, consumed by main-web and catalog-web (independently maintained
 * Askama/Leaf templates) - see the suite-avatar-menu OpenSpec change in sweetrpg/platform.
 * Always rendered regardless of login state - logged-out visitors get a "mystery man" silhouette
 * in the circle and a menu with a Log in item plus the theme picker; logged-in visitors get the
 * full menu. Colors mostly reference the Broadsheet custom properties (--color-bg, --color-text,
 * --color-accent, --color-neutral-*) each consuming frontend already defines, including
 * dark-theme overrides via [data-theme="dark"]. The one exception is the destructive-action
 * color on .avatar-menu-item-danger, which hardcodes the same critical/danger hex pair already
 * duplicated across .tag-critical/.banner-critical (main.css) and .tag-danger (main-web's
 * broadsheet.css) - no shared --color-danger variable exists yet to reference instead.
 */

.avatar-menu { position: relative; display: inline-block; }

.avatar-menu-trigger {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--color-neutral-300);
	background: var(--color-accent);
	color: white;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.avatar-menu-trigger:hover { border-color: var(--color-accent); }
.avatar-menu-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/*
 * A Gravatar image, when the visitor's session has an email. Absolutely positioned so it
 * stacks above the (statically positioned) fallback letter below without needing z-index.
 */
.avatar-menu-avatar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-menu-fallback {
	position: relative;
}

/*
 * Hidden by default whenever a Gravatar img is also present, so the two never render at once -
 * each consuming frontend's inline `onerror` on the img reveals this on a 404 (no registered
 * Gravatar) rather than showing Gravatar's generic mystery-person icon.
 */
.avatar-menu-avatar + .avatar-menu-fallback {
	display: none;
}

.avatar-menu-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 200px;
	background: var(--color-bg);
	border: 1px solid var(--color-neutral-300);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	padding: 6px;
	z-index: 100;
}
.avatar-menu-panel[hidden] { display: none; }

.avatar-menu-identity {
	padding: 8px 10px;
}

.avatar-menu-name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avatar-menu-email {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: color-mix(in srgb, var(--color-text) 55%, transparent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avatar-menu-divider {
	height: 1px;
	margin: 4px 2px;
	background: var(--color-neutral-300);
	border: none;
}

.avatar-menu-item {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--color-text);
	font-size: 14px;
	font-family: inherit;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
}
.avatar-menu-item:hover,
.avatar-menu-item:focus-visible {
	background: var(--color-neutral-300);
	outline: none;
}

.avatar-menu-item-form { margin: 0; }

/* Destructive action (e.g. "Log out") - same hex pair as .tag-critical/.banner-critical. */
.avatar-menu-item-danger { color: #7a1212; }
[data-theme="dark"] .avatar-menu-item-danger { color: #f5a3a3; }

/*
 * Light/dark/system theme picker, rendered as an always-visible 3-way segmented row (no
 * separate open/close step, unlike the rest of the menu) so a visitor can preview each choice
 * without re-opening anything. Present in both the logged-in and logged-out menu. The active
 * choice is marked via aria-pressed, set by the shared theme.js - this file only styles the
 * resulting state.
 */
.avatar-menu-theme-row {
	display: flex;
	gap: 4px;
	padding: 4px;
}
.avatar-menu-theme-option {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
}
.avatar-menu-theme-option:hover { background: var(--color-neutral-300); }
.avatar-menu-theme-option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.avatar-menu-theme-option[aria-pressed="true"] { background: var(--color-accent); color: white; }