/**
 * Structure for the button's dropdown panel (AB#17445).
 *
 * THE PLUGIN SHIPS NO STYLING FOR ANYTHING THE THEME OWNS - and this is not
 * that. The menu item and the block borrow the theme's own menu vocabulary and
 * are styled by it. The button's panel has no such owner: it hangs off a
 * <button> outside the <ul>, so no theme rule reaches it, and an unpositioned
 * panel does not merely look plain - it lands in the normal flow, pushes the
 * header down and shoves the logo sideways. That is broken on every theme, not
 * a matter of taste.
 *
 * Naming a theme class instead was considered and does not work: Bootstrap's
 * .dropdown-menu is display:none until .show is added, so the open-state class
 * would have to be configured too, per theme, and a wrong guess leaves the
 * panel invisible with aria-expanded="true" - worse than unstyled.
 *
 * So: position and a readable surface, nothing more. No fonts, no brand colour,
 * no sizing beyond what stops the text touching the edge. Everything here is
 * scoped to OUR class names, so it cannot leak into a theme's own menus. A site
 * that wants to style it itself turns this off:
 *
 *     add_filter( 'diverp_widgets_panel_styles', '__return_false' );
 */

.diverp-auth {
	position: relative;
}

/**
 * THE SIGNED-IN CHIP IS NOT A BUTTON (founder 2026-08-10).
 *
 * Signed out the control asks for something, and the theme's own button is
 * right. Signed in it asks for nothing - it states who you are and opens a
 * menu - so a second filled pill beside the cart would compete with whatever
 * the dive centre actually wants clicked.
 *
 * No fill, no border, no padding worth the name. The circle and the caret carry
 * the whole affordance.
 */
.diverp-auth__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.diverp-auth__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	flex: none;
	/* A TINT OF THE SURROUNDING TEXT, not a brand colour. The disc has to sit on
	   a white header and a dark one without this plugin knowing which, and the
	   text colour it inherits is the one thing already proven to contrast with
	   whatever is behind it.
	   The rgba is the floor for browsers without color-mix; the line after it
	   wins where color-mix exists and tracks the header exactly. */
	background: rgba(127, 127, 127, 0.25);
	background: var(--diverp-avatar-bg, color-mix(in srgb, currentColor 20%, transparent));
	color: inherit;
}

.diverp-auth__menu {
	position: absolute;
	top: calc( 100% + 4px );
	right: 0;
	z-index: 1000;
	min-width: 12rem;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 0.375rem;
	box-shadow: 0 0.5rem 1rem rgba( 0, 0, 0, 0.12 );
}

.diverp-auth__menu > li {
	display: block;
	margin: 0;
}

.diverp-auth__menu a,
.diverp-auth__menu button {
	display: block;
	width: 100%;
	padding: 0.4rem 1rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.diverp-auth__menu a:hover,
.diverp-auth__menu a:focus,
.diverp-auth__menu button:hover,
.diverp-auth__menu button:focus {
	background: rgba( 0, 0, 0, 0.05 );
}

/* Who you are, not somewhere you can go - so it does not read as an item. */
.diverp-auth__whoami span {
	display: block;
	padding: 0.4rem 1rem;
	opacity: 0.7;
	font-size: 0.9em;
	white-space: nowrap;
}