/*
 * [claude:opus-4.7-1m][hurc:v0.7.0] mod_hurc_account — BEM-classed component CSS.
 *
 * PURPOSE
 *   Styles the layout emitted by `tmpl/default.php`. Reads ONLY from the
 *   `--hurc-account-*` token contract — see tokens.css for the contract
 *   and its rationale.
 *
 * BLOCK
 *   .hurc-account-menu
 *
 * ELEMENTS
 *   __trigger              The button that opens the panel.
 *   __avatar               Circular avatar with initials or fallback icon.
 *   __label                The two-line label next to the avatar.
 *   __greeting-line        "Hello, sign in" / "Hello, Chris" (small).
 *   __account-line         "Account ▾" (bold cap line).
 *   __panel                The slide-down panel container.
 *   __guest                Guest-mode panel wrapper.
 *   __user                 Signed-in-mode panel wrapper.
 *   __guest-cta            Primary sign-in CTA button.
 *   __create               Secondary "Create an account" link.
 *   __login-slot           Wrapper around the optional server-rendered login HTML.
 *   __list-group           Wrapper around a heading + ul block.
 *   __list-heading         Section heading inside the panel.
 *   __list                 ul of menu links.
 *   __list-item            li wrapper.
 *   __link                 Individual menu-item anchor.
 *   __link-icon            Optional icon inside a link.
 *   __link-title           Label inside a link.
 *   __greeting             Standalone greeting paragraph (signed-in mode).
 *   __signout              The "Sign out" link at the bottom of the user panel.
 *
 * MODIFIERS
 *   --guest                Set on the block when no user is signed in.
 *   --user                 Set on the block when a user IS signed in.
 *   [data-hurc-account-panel][aria-hidden="false"]  Open state.
 *
 * RESPONSIVE
 *   The desktop two-line label is hidden under
 *   `--hurc-account-desktop-breakpoint` (default 1280px) — handled by JS
 *   that toggles a `.hurc-account-menu--compact` modifier based on the
 *   `data-hurc-account-desktop-breakpoint` attribute.
 */

/* ============================================================================
 * BLOCK
 * ========================================================================== */

.hurc-account-menu {
	position : relative;
	display  : inline-block;
	font-family: var(--hurc-account-font-family);
	font-size  : var(--hurc-account-font-size);
	font-weight: var(--hurc-account-font-weight);
	color      : var(--hurc-account-fg);
}

/* ============================================================================
 * TRIGGER
 * ========================================================================== */

.hurc-account-menu__trigger {
	display       : inline-flex;
	align-items   : center;
	gap           : var(--hurc-account-trigger-gap);
	padding       : var(--hurc-account-trigger-padding-y) var(--hurc-account-trigger-padding-x);
	background    : var(--hurc-account-trigger-bg);
	color         : var(--hurc-account-trigger-fg);
	border        : 1px solid var(--hurc-account-trigger-border);
	border-radius : var(--hurc-account-trigger-radius);
	cursor        : pointer;
	transition    : background-color var(--hurc-account-transition-duration) var(--hurc-account-transition-easing);
	line-height   : var(--hurc-account-label-line-height);
}

.hurc-account-menu__trigger:hover,
.hurc-account-menu__trigger:focus-visible {
	background : var(--hurc-account-trigger-hover-bg);
}

.hurc-account-menu__trigger:focus-visible {
	outline : 2px solid var(--hurc-account-cta-border);
	outline-offset : 2px;
}

.hurc-account-menu__avatar {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	width           : var(--hurc-account-avatar-size);
	height          : var(--hurc-account-avatar-size);
	border-radius   : var(--hurc-account-avatar-radius);
	background      : var(--hurc-account-avatar-bg);
	color           : var(--hurc-account-avatar-fg);
	font-size       : var(--hurc-account-avatar-font-size);
	font-weight     : var(--hurc-account-avatar-font-weight);
	border          : 1px solid var(--hurc-account-avatar-border);
	flex            : 0 0 auto;
}

.hurc-account-menu__avatar-icon {
	display : inline-block;
	width   : 60%;
	height  : 60%;
	background : currentColor;
	mask : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6Z"/></svg>') center / contain no-repeat;
	-webkit-mask : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6Z"/></svg>') center / contain no-repeat;
}

.hurc-account-menu__label {
	display     : inline-flex;
	flex-direction : column;
	align-items : flex-start;
	line-height : var(--hurc-account-label-line-height);
}

.hurc-account-menu__greeting-line {
	font-size   : var(--hurc-account-greeting-font-size);
	font-weight : var(--hurc-account-greeting-font-weight);
	color       : var(--hurc-account-muted);
}

.hurc-account-menu__account-line {
	font-size   : var(--hurc-account-account-font-size);
	font-weight : var(--hurc-account-account-font-weight);
	color       : var(--hurc-account-fg);
}

/* When JS detects the viewport is narrower than the configured breakpoint,
 * it adds .hurc-account-menu--compact and we hide the two-line label so only
 * the avatar shows. Configured per-instance via
 * `data-hurc-account-desktop-breakpoint`. */
.hurc-account-menu--compact .hurc-account-menu__label {
	display : none;
}

/* ============================================================================
 * PANEL
 * ========================================================================== */

.hurc-account-menu__panel {
	position      : absolute;
	top           : 100%;
	right         : 0;
	margin-top    : var(--hurc-account-panel-offset);
	min-width     : var(--hurc-account-panel-width);
	background    : var(--hurc-account-panel-bg);
	color         : var(--hurc-account-panel-fg);
	border        : 1px solid var(--hurc-account-panel-border);
	border-radius : var(--hurc-account-panel-radius);
	box-shadow    : var(--hurc-account-panel-shadow);
	padding       : var(--hurc-account-panel-padding);
	z-index       : var(--hurc-account-panel-z-index);

	/* hidden by default — JS toggles aria-hidden */
	opacity       : 0;
	transform     : translateY(calc(-1 * var(--hurc-account-panel-translate-y)));
	pointer-events: none;
	transition    : opacity var(--hurc-account-transition-duration) var(--hurc-account-transition-easing),
	                transform var(--hurc-account-transition-duration) var(--hurc-account-transition-easing);
}

.hurc-account-menu__panel[aria-hidden="false"] {
	opacity       : 1;
	transform     : translateY(0);
	pointer-events: auto;
}

/* ============================================================================
 * GUEST PANEL CONTENT
 * ========================================================================== */

.hurc-account-menu__guest,
.hurc-account-menu__user {
	display        : flex;
	flex-direction : column;
	gap            : var(--hurc-account-panel-gap);
}

.hurc-account-menu__guest-cta {
	display         : inline-block;
	text-align      : center;
	padding         : var(--hurc-account-cta-padding-y) var(--hurc-account-cta-padding-x);
	background      : var(--hurc-account-cta-bg);
	color           : var(--hurc-account-cta-fg);
	border          : 1px solid var(--hurc-account-cta-border);
	border-radius   : var(--hurc-account-cta-radius);
	text-decoration : none;
	font-weight     : 700;
	cursor          : pointer;
	transition      : background-color var(--hurc-account-transition-duration) var(--hurc-account-transition-easing);
}

.hurc-account-menu__guest-cta:hover,
.hurc-account-menu__guest-cta:focus-visible {
	background : var(--hurc-account-cta-hover-bg);
}

.hurc-account-menu__create {
	display         : inline-block;
	text-align      : center;
	font-size       : 0.8125rem;
	color           : var(--hurc-account-muted);
	text-decoration : none;
}

.hurc-account-menu__create:hover,
.hurc-account-menu__create:focus-visible {
	text-decoration : underline;
}

.hurc-account-menu__login-slot {
	margin-top : 0.5rem;
}

/* ============================================================================
 * MENU LISTS (shared between guest & user panels)
 * ========================================================================== */

.hurc-account-menu__list-group {
	margin-top : 0.5rem;
}

.hurc-account-menu__list-heading {
	margin         : 0 0 0.25rem 0;
	font-size      : var(--hurc-account-heading-font-size);
	font-weight    : var(--hurc-account-heading-font-weight);
	letter-spacing : var(--hurc-account-heading-letter-spacing);
	text-transform : var(--hurc-account-heading-text-transform);
	color          : var(--hurc-account-heading-fg);
}

.hurc-account-menu__list {
	list-style : none;
	padding    : 0;
	margin     : 0;
}

.hurc-account-menu__list-item + .hurc-account-menu__list-item {
	margin-top : 0.125rem;
}

.hurc-account-menu__link {
	display         : flex;
	align-items     : center;
	gap             : 0.5rem;
	padding         : var(--hurc-account-link-padding-y) var(--hurc-account-link-padding-x);
	color           : var(--hurc-account-link-fg);
	text-decoration : none;
	border-radius   : var(--hurc-account-trigger-radius);
	transition      : background-color var(--hurc-account-transition-duration) var(--hurc-account-transition-easing);
}

.hurc-account-menu__link:hover,
.hurc-account-menu__link:focus-visible {
	background : var(--hurc-account-link-hover-bg);
	color      : var(--hurc-account-link-hover-fg);
	outline    : none;
}

.hurc-account-menu__link-icon {
	flex      : 0 0 auto;
	width     : 1rem;
	height    : 1rem;
	font-size : 1rem;
	line-height: 1;
}

.hurc-account-menu__link-title {
	flex : 1 1 auto;
}

/* ============================================================================
 * USER PANEL CONTENT
 * ========================================================================== */

.hurc-account-menu__greeting {
	margin       : 0 0 0.25rem 0;
	font-size    : 0.9375rem;
	font-weight  : 700;
	color        : var(--hurc-account-fg);
}

.hurc-account-menu__signout {
	display         : inline-block;
	margin-top      : 0.5rem;
	padding         : var(--hurc-account-link-padding-y) 0;
	color           : var(--hurc-account-muted);
	font-size       : 0.8125rem;
	text-decoration : none;
}

.hurc-account-menu__signout:hover,
.hurc-account-menu__signout:focus-visible {
	color           : var(--hurc-account-fg);
	text-decoration : underline;
}

/* ============================================================================
 * NARROW VIEWPORT — Pin panel inside the viewport on phones
 * ========================================================================== */

/* [claude:opus-4.7-1m][hurc:v0.7.0] Mobile fit fix.
 *
 * Default panel positioning is `position: absolute; right: 0` anchored to
 * the menu wrapper. At phone widths (~375px) the trigger sits close to the
 * right edge of the header, so the right-anchored 18rem (288px) panel
 * extends past the LEFT edge of the viewport (observed rect.x = -37 at
 * 375px). Two anchor strategies fail at this size: (a) keeping right:0
 * pushes the panel off-screen left; (b) switching to left:0 would push it
 * off-screen right when the trigger is right-aligned.
 *
 * Fix: at ≤480px, lift the panel out of its absolute frame and pin it to
 * the viewport directly with `position: fixed`, anchored to both edges
 * with a small gutter. The trigger itself stays in its (sticky) header;
 * the panel just floats below it pinned to the viewport, full-width minus
 * gutters. This guarantees rect.x ≥ 0 regardless of where the trigger
 * lives in the header layout.
 *
 * Tokens:
 *   --hurc-account-panel-narrow-top     viewport top offset (default 64px
 *                                       to clear a typical fixed header).
 *   --hurc-account-panel-narrow-gutter  side gutter (default 0.5rem).
 *
 * The host site overrides either token if its header height differs. */

@media (max-width: 480px) {
	.hurc-account-menu__panel {
		position   : fixed;
		top        : var(--hurc-account-panel-narrow-top, 64px);
		left       : var(--hurc-account-panel-narrow-gutter, 0.5rem);
		right      : var(--hurc-account-panel-narrow-gutter, 0.5rem);
		margin-top : 0;
		min-width  : 0;
		max-width  : none;
		width      : auto;
	}
}

/* ============================================================================
 * REDUCED MOTION
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hurc-account-menu__panel,
	.hurc-account-menu__trigger,
	.hurc-account-menu__guest-cta,
	.hurc-account-menu__link {
		transition : none;
	}
}