/* Global session (popover) menu */

/* Color palette - Light theme */
#account-menu-popover {
	--color-text-primary: #1d1d1f;
	--color-text-secondary: #424245;
	--color-text-emphasis: black;
	--color-text-on-avatar: #ffffff;
	--color-background-primary: #ffffff;
	--color-background-hover: #f5f5f7;
	--color-border: #d2d2d7;
	--color-avatar-bg: linear-gradient(to bottom, #B7CDE8, #8A96C7);
	--color-focus-outline: #0066cc;
	--color-shadow: rgba(0, 0, 0, 0.12);
}

/* Color palette - Dark theme */
body[data-color-scheme="dark"] #account-menu-popover,
body.theme-dark #account-menu-popover {
	--color-text-primary: #f5f5f7;
	--color-text-secondary: #a1a1a6;
	--color-text-emphasis: white;
	--color-text-on-avatar: #ffffff;
	--color-background-primary: #1d1d1f;
	--color-background-hover: #2c2c2e;
	--color-border: #424245;
	--color-avatar-bg: linear-gradient(to bottom, #575466, #33294E);
	/* --color-focus-outline: #0a84ff; */
	--color-shadow: rgba(0, 0, 0, 0.5);
}

/* Vertically centers the "Sign In" button when not authenticated. */
/* .globalnav-with-menu-open, .globalnav-with-flyout-open */
.globalnav .globalnav-account.unauthenticated {
	display: flex;
	align-items: center;
}

/* Hides the "Sign In" button when the global nav menu is open on mobile . */
/* .globalnav-with-menu-open, .globalnav-with-flyout-open */
@media only screen and (max-width: 833px) {
	.globalnav[class*="open"] .globalnav-account.unauthenticated {
		display: none;
	}
}

/* Transitions to a wider container when the default avatar button is
   replaced with a wider "Sign In" button. */
@media only screen and (max-width: 833px) {
	#globalnav .globalnav-item.globalnav-account {
		transition: width 0.35s ease-in-out;
	}

	#globalnav .globalnav-item.globalnav-account.unauthenticated {
		width: 60px !important;
	}
}

/* Minor vertical adjustment for the "Sign In" button. */
.globalnav .globalnav-account.unauthenticated .globalnav-account-wrapper {
	position: relative;
    top: -2px;
}

/* Prevents an "interactive" cursor while session info is still being fetched. */
.globalnav-link-account[disabled] {
	cursor: default;
}

/* ---------------------------------------------------------------------------
   Account menu popover
   --------------------------------------------------------------------------- */

#account-menu-popover {
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
	position: fixed;
	margin-top: 8px;
	width: 320px;
	background: var(--color-background-primary);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	box-shadow: 0 4px 24px var(--color-shadow);
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
	opacity: 0;
	transition:
		opacity 0.2s ease,
		display 0.2s allow-discrete,
		overlay 0.2s allow-discrete;
}

/* ---------------------------------------------------------------------------
   Popover API (Baseline April 2024)
   These declarations depend on `:popover-open` and `@starting-style`, which
   share the same support floor as the Popover API itself. Browsers that don't
   support the Popover API will ignore these rules entirely.
   --------------------------------------------------------------------------- */

/* Reveals the popover when open. */
#account-menu-popover:popover-open {
	opacity: 1;
}

/* Animates the popover in from opacity 0 on first paint. */
@starting-style {
	#account-menu-popover:popover-open {
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
   CSS Anchor Positioning (Baseline 2026)
   These declarations are currently superseded by the JavaScript-based
   positionPopover() fallback, which sets explicit fixed pixel values on every
   popover open. They are preserved here for when anchor positioning can be
   relied upon without a JS fallback.
   --------------------------------------------------------------------------- */

/* Declares `.globalnav-link-account` as a named anchor target. */
.globalnav-link-account {
	anchor-name: --account-link;
}

/* Positions the popover relative to the anchor link. */
#account-menu-popover {
	position-anchor: --account-link;
	top: anchor(bottom);
	right: anchor(right);
}

/* ---------------------------------------------------------------------------
   Account menu popover content
   --------------------------------------------------------------------------- */

/* Top-most section holding the user's initial, full name, and email address. */
.account-menu-user-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 20px 16px 20px;
}

/* The first letter of an authenticated user's first name, encircled by a vertical gradient.  */
.account-menu-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-avatar-bg);
	color: var(--color-text-on-avatar);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 600;
	flex-shrink: 0;
}

/* An authenticated user's full name and email address. */
.account-menu-user-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* An authenticated user's full name. */
.account-menu-user-name {
	font-weight: 600;
	font-size: 17px;
	color: var(--color-text-primary);
}

/* An authenticated user's email address. */
.account-menu-user-email {
	color: var(--color-text-secondary);
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Horizontal dividers. */
.account-menu-divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 0;
}

/* Padding for the containers holding lists of resource links. */
#account-menu-popover nav {
	padding: 10px;
}

/* Individual resource link (includes "Sign out" link). */
.account-menu-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	color: var(--color-text-secondary);
	font-size: 14px;
	background-color: var(--color-background-primary);
	transition: background-color 0.24s ease;
	border-radius: 0;
}

/* Individual resource link (hover styles) */
.account-menu-link:hover {
	text-decoration: none;
	color: var(--color-text-emphasis);
	background-color: var(--color-background-hover);
	border-radius: 8px;
}

/* Fixed-width column that aligns resource link icons without scaling SVGs. */
.account-menu-link-icon-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 1.7em;
}

/* Resource link icons (SF symbols) */
.account-menu-link-icon {
	overflow: visible;
}