/*!
 * PetMap Directory — header pieces: the site menu (`[petmap_site_menu]`,
 * the `pmd-site-menu` Elementor widget) and the account button
 * (`[petmap_account_button]`, the `pmd-account-button` widget).
 *
 * Loaded only where one renders (Front\Assets::enqueue_header_assets(),
 * printed in place when the header renders after wp_head — see
 * Assets::late_header_style_tag()). Every colour, radius, shadow, duration
 * and font reads a --pmd-* token from Front\DesignSystem, so the warm design
 * preset restyles the header together with the rest of PetMap. The widgets'
 * style controls write the --pmd-site-menu-* and --pmd-account-* properties
 * below on their wrapper; each falls back to a token.
 *
 * Every rule that sets a colour is prefixed with the component root: theme
 * and Elementor kit rules such as `.elementor-kit-5 a` would otherwise beat
 * a lone class. The drawer is its own root (`.pmd-site-menu__drawer`):
 * header.js moves it to <body> while it is open, because a sticky header
 * with a transform or backdrop-filter would otherwise trap a fixed-position
 * child inside the header's own box. Controls are 44px tall, which sits comfortably in a 64px
 * desktop or 56px mobile header and is the minimum comfortable hit area.
 *
 * @package PetMapDirectory
 */

/* ---------------------------------------------------------------------- */
/* Shared                                                                 */
/* ---------------------------------------------------------------------- */

.pmd-site-menu,
.pmd-site-menu *,
.pmd-site-menu *::before,
.pmd-site-menu *::after,
.pmd-site-menu__drawer,
.pmd-site-menu__drawer *,
.pmd-site-menu__drawer *::before,
.pmd-site-menu__drawer *::after,
.pmd-account-btn,
.pmd-account-btn *,
.pmd-account-btn *::before,
.pmd-account-btn *::after {
	box-sizing: border-box;
}

.pmd-hdr-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The page behind an open drawer stops scrolling; header.js sets the gap
 * the scrollbar leaves, so the layout does not jump sideways. */
html.pmd-scroll-locked,
html.pmd-scroll-locked body {
	overflow: hidden;
}

html.pmd-scroll-locked body {
	padding-right: var(--pmd-scrollbar-gap, 0px);
}

@keyframes pmd-hdr-pop {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes pmd-hdr-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Site menu — desktop bar                                                */
/* ---------------------------------------------------------------------- */

.pmd-site-menu {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
}

.pmd-site-menu .pmd-site-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pmd-site-menu-gap, var(--pmd-space-1));
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-site-menu .pmd-site-menu__item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border-radius: var(--pmd-radius-pill);
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-site-menu .pmd-site-menu__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--pmd-site-menu-link-px, 14px);
	border-radius: var(--pmd-radius-pill);
	color: var(--pmd-site-menu-link, var(--pmd-color-text));
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-semibold);
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-site-menu .pmd-site-menu__item.has-sub > .pmd-site-menu__link {
	padding-right: 2px;
}

/* Hover and the current page: a soft pill behind the item (link and
 * submenu button together), the label in the deep brand tone — 4.5:1 or
 * better on the tint in both presets. */
.pmd-site-menu .pmd-site-menu__item:hover > .pmd-site-menu__link,
.pmd-site-menu .pmd-site-menu__item:hover > .pmd-site-menu__sub-toggle {
	color: var(--pmd-site-menu-link-hover, var(--pmd-color-primary-hover));
}

.pmd-site-menu--indicator-pill .pmd-site-menu__item:hover,
.pmd-site-menu--indicator-none .pmd-site-menu__item:hover,
.pmd-site-menu--indicator-pill .pmd-site-menu__item.is-current,
.pmd-site-menu--indicator-pill .pmd-site-menu__item.is-current-ancestor {
	background-color: var(--pmd-color-primary-soft);
}

.pmd-site-menu .pmd-site-menu__item.is-current > .pmd-site-menu__link,
.pmd-site-menu .pmd-site-menu__item.is-current-ancestor > .pmd-site-menu__link,
.pmd-site-menu .pmd-site-menu__item.is-current-ancestor > .pmd-site-menu__sub-toggle {
	color: var(--pmd-site-menu-link-active, var(--pmd-color-primary-hover));
}

/* Underline indicator: a rounded accent bar that grows from the centre. */
.pmd-site-menu--indicator-underline .pmd-site-menu__link::after {
	position: absolute;
	right: var(--pmd-site-menu-link-px, 14px);
	bottom: 6px;
	left: var(--pmd-site-menu-link-px, 14px);
	height: 3px;
	border-radius: 3px;
	background: var(--pmd-color-accent, var(--pmd-color-primary));
	transform: scaleX(0);
	transition: transform var(--pmd-duration-normal) var(--pmd-ease-out);
	content: "";
}

.pmd-site-menu--indicator-underline .pmd-site-menu__item.has-sub > .pmd-site-menu__link::after {
	right: 2px;
}

.pmd-site-menu--indicator-underline .pmd-site-menu__item:hover > .pmd-site-menu__link::after,
.pmd-site-menu--indicator-underline .pmd-site-menu__item.is-current > .pmd-site-menu__link::after,
.pmd-site-menu--indicator-underline .pmd-site-menu__item.is-current-ancestor > .pmd-site-menu__link::after {
	transform: scaleX(1);
}

.pmd-site-menu a:focus-visible,
.pmd-site-menu button:focus-visible,
.pmd-site-menu__drawer a:focus-visible,
.pmd-site-menu__drawer button:focus-visible {
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary));
	outline-offset: 2px;
}

/* Buttons: themes and Elementor kits style `button` heavily; reset what
 * matters, then style. */
.pmd-site-menu .pmd-site-menu__sub-toggle,
.pmd-site-menu .pmd-site-menu__toggle,
.pmd-site-menu__drawer .pmd-site-menu__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--pmd-radius-pill);
	box-shadow: none;
	background: transparent;
	color: var(--pmd-site-menu-link, var(--pmd-color-text));
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.pmd-site-menu .pmd-site-menu__sub-toggle {
	width: 32px;
	height: 44px;
	margin-right: 6px;
}

.pmd-site-menu .pmd-site-menu__sub-toggle:hover {
	background: transparent;
	color: var(--pmd-site-menu-link-hover, var(--pmd-color-primary-hover));
}

.pmd-site-menu .pmd-site-menu__chevron {
	transition: transform var(--pmd-duration-normal) var(--pmd-ease-out);
}

.pmd-site-menu .pmd-site-menu__item.is-open .pmd-site-menu__chevron {
	transform: rotate(180deg);
}

/* Submenu dropdown. */
.pmd-site-menu .pmd-site-menu__sub {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: var(--pmd-z-dropdown);
	min-width: 220px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-lg);
	box-shadow: var(--pmd-shadow-lg);
	background: var(--pmd-color-surface-raised);
	list-style: none;
	transform-origin: top left;
	animation: pmd-hdr-pop var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-site-menu .pmd-site-menu__item:last-child > .pmd-site-menu__sub {
	right: 0;
	left: auto;
	transform-origin: top right;
}

/* Bridges the gap between the item and its dropdown, so a pointer moving
 * down does not leave the item and close a hover-opened submenu. */
.pmd-site-menu .pmd-site-menu__sub::before {
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	height: 10px;
	content: "";
}

.pmd-site-menu .pmd-site-menu__sub[hidden] {
	display: none;
}

@media (hover: hover) {
	.pmd-site-menu .pmd-site-menu__item.has-sub:hover > .pmd-site-menu__sub {
		display: block;
	}
}

.pmd-site-menu .pmd-site-menu__sub-item {
	margin: 0;
	padding: 0;
}

.pmd-site-menu .pmd-site-menu__sub-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: max(4px, calc(var(--pmd-radius-lg) - 8px));
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-regular);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out), color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-site-menu .pmd-site-menu__sub-link:hover,
.pmd-site-menu .pmd-site-menu__sub-item.is-current > .pmd-site-menu__sub-link {
	background: var(--pmd-color-primary-soft);
	color: var(--pmd-color-primary-hover);
}

.pmd-site-menu .pmd-site-menu__sub-item.is-current > .pmd-site-menu__sub-link {
	font-weight: var(--pmd-weight-semibold);
}

/* ---------------------------------------------------------------------- */
/* Site menu — hamburger and drawer                                       */
/* ---------------------------------------------------------------------- */

/* Shown below the breakpoint by the instance's own media query. */
.pmd-site-menu .pmd-site-menu__toggle {
	display: none;
	width: var(--pmd-site-menu-burger-size, 44px);
	height: var(--pmd-site-menu-burger-size, 44px);
	color: var(--pmd-site-menu-burger-color, var(--pmd-color-text));
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out), transform var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-site-menu .pmd-site-menu__toggle:hover {
	background: var(--pmd-color-primary-soft);
	color: var(--pmd-site-menu-burger-color, var(--pmd-color-primary-hover));
}

.pmd-site-menu .pmd-site-menu__toggle:active,
.pmd-site-menu__drawer .pmd-site-menu__close:active {
	transform: scale(0.96);
}

/* Three rounded bars; the middle one is shorter and stretches on hover —
 * a small playful detail that still reads as "menu". */
.pmd-site-menu .pmd-site-menu__burger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: calc(var(--pmd-site-menu-burger-size, 44px) * 0.46);
	height: calc(var(--pmd-site-menu-burger-size, 44px) * 0.32);
}

.pmd-site-menu .pmd-site-menu__burger > span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.pmd-site-menu .pmd-site-menu__burger > span:nth-child(2) {
	width: 64%;
	transition: width var(--pmd-duration-normal) var(--pmd-ease-out);
}

.pmd-site-menu .pmd-site-menu__toggle:hover .pmd-site-menu__burger > span:nth-child(2),
.pmd-site-menu .pmd-site-menu__toggle[aria-expanded="true"] .pmd-site-menu__burger > span:nth-child(2) {
	width: 100%;
}

.pmd-site-menu__drawer {
	position: fixed;
	inset: 0;
	z-index: var(--pmd-site-menu-drawer-z, 100000);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	text-align: left;
}

.pmd-site-menu__drawer[hidden] {
	display: none;
}

.pmd-site-menu__drawer .pmd-site-menu__backdrop {
	position: absolute;
	inset: 0;
	background: var(--pmd-color-overlay);
	opacity: 0;
	transition: opacity var(--pmd-duration-slow) var(--pmd-ease-out);
}

.pmd-site-menu__drawer.is-open .pmd-site-menu__backdrop {
	opacity: 1;
}

/* Exit 220ms (header.js hides the dialog after it), enter 280ms. */
.pmd-site-menu__drawer .pmd-site-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(88vw, var(--pmd-site-menu-drawer-width, 360px));
	padding: var(--pmd-space-3) var(--pmd-space-3) var(--pmd-space-6);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--pmd-radius-xl) 0 0 var(--pmd-radius-xl);
	box-shadow: var(--pmd-shadow-xl);
	background: var(--pmd-site-menu-drawer-bg, var(--pmd-color-surface));
	color: var(--pmd-color-text);
	transform: translateX(100%);
	transition: transform 220ms var(--pmd-ease-out);
}

.pmd-site-menu__drawer--left .pmd-site-menu__panel {
	right: auto;
	left: 0;
	border-radius: 0 var(--pmd-radius-xl) var(--pmd-radius-xl) 0;
	transform: translateX(-100%);
}

.pmd-site-menu__drawer.is-open .pmd-site-menu__panel {
	transform: translateX(0);
	transition-duration: 280ms;
}

.pmd-site-menu__drawer .pmd-site-menu__panel-head {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-3);
	min-height: 56px;
	margin-bottom: var(--pmd-space-2);
	padding: 0 0 var(--pmd-space-3) var(--pmd-space-2);
	border-bottom: 1px solid var(--pmd-color-border);
}

.pmd-site-menu__drawer .pmd-site-menu__logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-radius: var(--pmd-radius-md);
}

.pmd-site-menu__drawer .pmd-site-menu__logo {
	display: block;
	width: auto;
	max-width: 160px;
	height: auto;
	max-height: 40px;
}

.pmd-site-menu__drawer .pmd-site-menu__close {
	width: 44px;
	height: 44px;
	margin-left: auto;
	background: var(--pmd-color-surface-alt);
	color: var(--pmd-color-text);
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out), transform var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-site-menu__drawer .pmd-site-menu__close:hover {
	background: var(--pmd-color-primary-soft);
	color: var(--pmd-color-primary-hover);
}

.pmd-site-menu__drawer .pmd-site-menu__drawer-list,
.pmd-site-menu__drawer .pmd-site-menu__drawer-sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-site-menu__drawer .pmd-site-menu__drawer-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pmd-site-menu__drawer .pmd-site-menu__drawer-item,
.pmd-site-menu__drawer .pmd-site-menu__drawer-sub-item {
	margin: 0;
	padding: 0;
}

.pmd-site-menu__drawer .pmd-site-menu__drawer-link {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-3);
	min-height: 52px;
	padding: 0 var(--pmd-space-4);
	border-radius: var(--pmd-radius-lg);
	color: var(--pmd-site-menu-link, var(--pmd-color-text));
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-lg);
	font-weight: var(--pmd-weight-semibold);
	line-height: 1.25;
	text-decoration: none;
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out), color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-site-menu__drawer .pmd-site-menu__drawer-link:hover,
.pmd-site-menu__drawer .pmd-site-menu__drawer-item.is-current > .pmd-site-menu__drawer-link,
.pmd-site-menu__drawer .pmd-site-menu__drawer-item.is-current-ancestor > .pmd-site-menu__drawer-link {
	background: var(--pmd-color-primary-soft);
	color: var(--pmd-site-menu-link-active, var(--pmd-color-primary-hover));
}

/* The current page also gets an accent dot: position is never told by
 * colour alone. */
.pmd-site-menu__drawer .pmd-site-menu__drawer-item.is-current > .pmd-site-menu__drawer-link::after,
.pmd-site-menu__drawer .pmd-site-menu__drawer-sub-item.is-current > .pmd-site-menu__drawer-sub-link::after {
	flex: none;
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--pmd-color-accent, var(--pmd-color-primary));
	content: "";
}

.pmd-site-menu__drawer .pmd-site-menu__drawer-sub {
	margin: 2px 0 var(--pmd-space-2) var(--pmd-space-4);
	padding-left: var(--pmd-space-3);
	border-left: 2px solid var(--pmd-color-border);
}

.pmd-site-menu__drawer .pmd-site-menu__drawer-sub-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--pmd-space-3);
	border-radius: var(--pmd-radius-md);
	color: var(--pmd-color-text-muted);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-md);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out), color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-site-menu__drawer .pmd-site-menu__drawer-sub-link:hover,
.pmd-site-menu__drawer .pmd-site-menu__drawer-sub-item.is-current > .pmd-site-menu__drawer-sub-link {
	background: var(--pmd-color-primary-soft);
	color: var(--pmd-color-primary-hover);
}

/* Staggered entrance: the drawer opens rarely, and the cascade tells the
 * eye where the list starts. Capped at eight steps. */
@media (prefers-reduced-motion: no-preference) {
	.pmd-site-menu__drawer.is-open .pmd-site-menu__drawer-list > li {
		animation: pmd-hdr-rise 320ms var(--pmd-ease-out) both;
	}

	.pmd-site-menu__drawer.is-open .pmd-site-menu__drawer-list > li:nth-child(2) { animation-delay: 30ms; }
	.pmd-site-menu__drawer.is-open .pmd-site-menu__drawer-list > li:nth-child(3) { animation-delay: 60ms; }
	.pmd-site-menu__drawer.is-open .pmd-site-menu__drawer-list > li:nth-child(4) { animation-delay: 90ms; }
	.pmd-site-menu__drawer.is-open .pmd-site-menu__drawer-list > li:nth-child(5) { animation-delay: 120ms; }
	.pmd-site-menu__drawer.is-open .pmd-site-menu__drawer-list > li:nth-child(6) { animation-delay: 150ms; }
	.pmd-site-menu__drawer.is-open .pmd-site-menu__drawer-list > li:nth-child(7) { animation-delay: 180ms; }
	.pmd-site-menu__drawer.is-open .pmd-site-menu__drawer-list > li:nth-child(n+8) { animation-delay: 210ms; }
}

@media (prefers-reduced-motion: reduce) {
	.pmd-site-menu__drawer .pmd-site-menu__panel,
	.pmd-site-menu__drawer .pmd-site-menu__backdrop,
	.pmd-site-menu .pmd-site-menu__chevron,
	.pmd-site-menu .pmd-site-menu__burger > span,
	.pmd-site-menu--indicator-underline .pmd-site-menu__link::after {
		transition: none;
	}

	.pmd-site-menu .pmd-site-menu__sub {
		animation: none;
	}
}

.pmd-site-menu-notice {
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-3);
	border: 1px dashed var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-md);
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
}

/* ---------------------------------------------------------------------- */
/* Account button                                                         */
/* ---------------------------------------------------------------------- */

.pmd-account-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--pmd-space-1);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
}

.pmd-account-btn a:focus-visible,
.pmd-account-btn button:focus-visible {
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary));
	outline-offset: 2px;
}

/* Visitor: "Log in" (filled or outline) and a quieter "Create account". */
.pmd-account-btn .pmd-hdr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid transparent;
	border-radius: var(--pmd-account-btn-radius, var(--pmd-radius-pill));
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-semibold);
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out), border-color var(--pmd-duration-fast) var(--pmd-ease-out), color var(--pmd-duration-fast) var(--pmd-ease-out), transform var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-account-btn .pmd-hdr-btn:active {
	transform: scale(0.96);
}

.pmd-account-btn .pmd-hdr-btn--filled {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--pmd-shadow-sm);
	background: var(--pmd-account-btn-bg, var(--pmd-color-primary));
	color: var(--pmd-account-btn-color, var(--pmd-color-on-primary));
}

.pmd-account-btn .pmd-hdr-btn--filled:hover {
	background: var(--pmd-account-btn-bg-hover, var(--pmd-color-primary-hover));
	color: var(--pmd-account-btn-color, var(--pmd-color-on-primary));
}

.pmd-account-btn .pmd-hdr-btn--outline {
	border-color: var(--pmd-account-btn-bg, var(--pmd-color-primary));
	background: transparent;
	color: var(--pmd-account-btn-bg, var(--pmd-color-primary));
}

.pmd-account-btn .pmd-hdr-btn--outline:hover {
	border-color: var(--pmd-account-btn-bg-hover, var(--pmd-color-primary-hover));
	background: var(--pmd-color-primary-soft);
	color: var(--pmd-account-btn-bg-hover, var(--pmd-color-primary-hover));
}

.pmd-account-btn .pmd-hdr-btn--quiet {
	padding: 0 14px;
	background: transparent;
	color: var(--pmd-color-text);
}

.pmd-account-btn .pmd-hdr-btn--quiet:hover {
	background: var(--pmd-color-primary-soft);
	color: var(--pmd-color-primary-hover);
}

/* Member: avatar, name and chevron in one soft pill. */
.pmd-account-btn .pmd-account-btn__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--pmd-space-2);
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-pill);
	box-shadow: var(--pmd-shadow-sm);
	background: var(--pmd-color-surface-raised);
	color: var(--pmd-color-text);
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out), border-color var(--pmd-duration-fast) var(--pmd-ease-out), box-shadow var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-account-btn .pmd-account-btn__trigger:hover {
	border-color: var(--pmd-color-border-strong);
	background: var(--pmd-color-surface-raised);
	color: var(--pmd-color-text);
}

.pmd-account-btn.is-open .pmd-account-btn__trigger {
	border-color: var(--pmd-color-accent, var(--pmd-color-primary));
	box-shadow: 0 0 0 3px var(--pmd-color-primary-soft);
}

.pmd-account-btn .pmd-account-btn__avatar {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--pmd-account-avatar-size, 36px);
	height: var(--pmd-account-avatar-size, 36px);
	overflow: hidden;
	border-radius: 50%;
	box-shadow: 0 0 0 var(--pmd-account-avatar-ring-width, 2px) var(--pmd-account-avatar-ring, var(--pmd-color-accent, var(--pmd-color-primary)));
	background: var(--pmd-color-primary-soft);
}

.pmd-account-btn .pmd-account-btn__initials {
	color: var(--pmd-color-primary-hover);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: calc(var(--pmd-account-avatar-size, 36px) * 0.4);
	font-weight: var(--pmd-weight-semibold);
	letter-spacing: 0.02em;
	user-select: none;
}

/* Painted over the initials; a member without a Gravatar gets a blank,
 * transparent image and the initials show through. */
.pmd-account-btn .pmd-account-btn__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 50%;
	outline: 1px solid rgba(0, 0, 0, 0.1);
	outline-offset: -1px;
	object-fit: cover;
}

.pmd-account-btn .pmd-account-btn__name {
	max-width: 14ch;
	overflow: hidden;
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pmd-account-btn .pmd-account-btn__chevron {
	flex: none;
	color: var(--pmd-color-text-muted);
	transition: transform var(--pmd-duration-normal) var(--pmd-ease-out);
}

.pmd-account-btn.is-open .pmd-account-btn__chevron {
	transform: rotate(180deg);
}

/* The menu. */
.pmd-account-btn .pmd-account-btn__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: var(--pmd-z-dropdown);
	width: max-content;
	min-width: 240px;
	max-width: min(320px, calc(100vw - 32px));
	padding: 8px;
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-account-menu-radius, var(--pmd-radius-lg));
	box-shadow: var(--pmd-shadow-lg);
	background: var(--pmd-account-menu-bg, var(--pmd-color-surface-raised));
	color: var(--pmd-color-text);
	text-align: left;
	transform-origin: top right;
	animation: pmd-hdr-pop var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-account-btn .pmd-account-btn__menu[hidden] {
	display: none;
}

.pmd-account-btn .pmd-account-btn__menu-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 6px;
	padding: 8px 12px 10px;
	border-bottom: 1px solid var(--pmd-color-border);
}

.pmd-account-btn .pmd-account-btn__menu-name {
	overflow: hidden;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pmd-account-btn .pmd-account-btn__menu-hint {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
}

.pmd-account-btn .pmd-account-btn__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-account-btn .pmd-account-btn__entry {
	margin: 0;
	padding: 0;
}

.pmd-account-btn .pmd-account-btn__entry--logout {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--pmd-color-border);
}

.pmd-account-btn .pmd-account-btn__item {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-3);
	min-height: 44px;
	padding: 0 12px;
	border-radius: max(4px, calc(var(--pmd-account-menu-radius, var(--pmd-radius-lg)) - 8px));
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--pmd-duration-fast) var(--pmd-ease-out), color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-account-btn .pmd-account-btn__item:hover {
	background: var(--pmd-color-primary-soft);
	color: var(--pmd-color-primary-hover);
}

.pmd-account-btn .pmd-account-btn__icon {
	flex: none;
	color: var(--pmd-color-text-muted);
	transition: color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-account-btn .pmd-account-btn__item:hover .pmd-account-btn__icon {
	color: var(--pmd-color-accent, var(--pmd-color-primary));
}

/* Phones: one compact control. "Create account" stays one tap away on the
 * login page; the name stays the button's accessible name. */
@media (max-width: 479.98px) {
	.pmd-account-btn .pmd-account-btn__register {
		display: none;
	}

	.pmd-account-btn .pmd-hdr-btn {
		padding: 0 16px;
	}

	.pmd-account-btn .pmd-account-btn__trigger {
		padding-right: 8px;
	}

	.pmd-account-btn .pmd-account-btn__name {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmd-account-btn .pmd-account-btn__menu {
		animation: none;
	}

	.pmd-account-btn .pmd-account-btn__chevron,
	.pmd-account-btn .pmd-hdr-btn {
		transition: none;
	}

	.pmd-account-btn .pmd-hdr-btn:active {
		transform: none;
	}
}