/* -------------------------------------------------------------------------- */
/* Toggle button                                                              */
/* -------------------------------------------------------------------------- */

.ob-app-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ds-size-2);
	background: transparent;
	border: none;
	border-radius: var(--ds-border-radius-md);
	color: currentcolor;
	cursor: pointer;
	line-height: 1;
}

.ob-app-menu-toggle:hover {
	background: color-mix(in oklab, currentcolor 12%, transparent);
}

.ob-app-menu-toggle:focus-visible {
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: var(--ds-size-1);
}

.ob-app-menu-toggle__icon {
	display: block;
}

/*
 * Badge pointing at the "install update" action inside the menu. Uses the
 * warning palette so it reads as "needs attention" rather than an error.
 */
.ob-app-menu-toggle {
	position: relative;
}

.ob-app-menu-toggle__badge {
	position: absolute;
	inset-block-start: var(--ds-size-1);
	inset-inline-end: var(--ds-size-1);
	width: var(--ds-size-2);
	height: var(--ds-size-2);
	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-background-default);
	border-radius: var(--ds-border-radius-full, 50%);
	background: var(--ds-color-warning-base-default);
}

@media (prefers-reduced-motion: no-preference) {
	.ob-app-menu-toggle__badge {
		animation: ob-app-menu-badge-pulse 2s ease-out 3;
	}
}

@keyframes ob-app-menu-badge-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 transparent;
	}

	50% {
		box-shadow: 0 0 0 var(--ds-size-1) color-mix(in oklab, var(--ds-color-warning-base-default) 45%, transparent);
	}
}

/* -------------------------------------------------------------------------- */
/* Dialog                                                                     */
/* -------------------------------------------------------------------------- */

/*
 * `display` must only be set while the dialog is open, otherwise it overrides
 * the user agent's `dialog:not([open]) { display: none }` rule and the menu
 * stays visible when closed.
 */
.ob-app-menu {
	display: none;
	padding: 0;
	margin: 0 auto;
	inset-block-start: var(--ds-size-2);
	max-width: min(72rem, calc(100vw - var(--ds-size-4)));
	width: 100%;
	max-height: min(44rem, calc(100dvh - var(--ds-size-8)));
	height: 100%;
	overflow: hidden;
	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle);
	border-radius: var(--ds-border-radius-lg);
	background: var(--ds-color-neutral-background-default);
	color: var(--ds-color-neutral-text-default);
	box-shadow: var(--ds-shadow-lg);
	font-size: var(--ds-body-sm-font-size, 1rem);
}

.ob-app-menu[open] {
	display: block;
}

.ob-app-menu::backdrop {
	background: rgb(0 0 0 / 40%);
}

.ob-app-menu__panel {
	display: grid;
	grid-template-columns: minmax(14rem, 18rem) 1fr;
	height: 100%;
	min-height: 0;
}

/* -------------------------------------------------------------------------- */
/* Left rail: search + categories                                             */
/* -------------------------------------------------------------------------- */

.ob-app-menu__rail {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-2);
	min-height: 0;
	padding: var(--ds-size-4);
	border-inline-end: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle);
	background: var(--ds-color-neutral-background-tinted);
}

.ob-app-menu__search {
	flex: 0 0 auto;
}

.ob-app-menu__groups {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-1);
	overflow-y: auto;
	min-height: 0;
}

.ob-app-menu__group-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-size-2);
	width: 100%;
	padding: var(--ds-size-2) var(--ds-size-3);
	border: none;
	border-radius: var(--ds-border-radius-md);
	background: transparent;
	color: var(--ds-color-neutral-text-default);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.ob-app-menu__group-button:hover {
	background: var(--ds-color-neutral-surface-hover);
}

.ob-app-menu__group-button[aria-current="true"] {
	background: var(--ds-color-brand-surface-active, var(--ds-color-neutral-surface-active));
	color: var(--ds-color-brand-text-default, var(--ds-color-neutral-text-default));
	font-weight: var(--ds-font-weight-medium, 500);
}

.ob-app-menu__group-button:focus-visible {
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: calc(var(--ds-size-1) * -1);
}

.ob-app-menu__count {
	color: var(--ds-color-neutral-text-subtle);
	font-size: var(--ds-body-xs-font-size, 0.875em);
	font-variant-numeric: tabular-nums;
}

.ob-app-menu__rail-heading {
	margin: var(--ds-size-4) 0 var(--ds-size-1);
	padding-inline: var(--ds-size-3);
	color: var(--ds-color-neutral-text-subtle);
	font-size: var(--ds-body-xs-font-size, 0.875em);
	font-weight: var(--ds-font-weight-medium, 500);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/*
 * Color scheme toggle. `margin-block-start: auto` pins it to the bottom of the
 * rail; the group list above shrinks and scrolls instead of pushing it down.
 */
.ob-app-menu__color-scheme {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	margin-block-start: auto;
	padding-block-start: var(--ds-size-3);
}

/* Icon-only buttons: the label text stays in the DOM as the accessible name. */
.ob-app-menu__color-scheme-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------- */
/* Right pane: app list                                                       */
/* -------------------------------------------------------------------------- */

.ob-app-menu__content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: var(--ds-size-4);
}

.ob-app-menu__content-header {
	/* Rendered last in the DOM so the app list comes first in the tab order. */
	order: -1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ds-size-2);
	margin-block-end: var(--ds-size-2);
}

.ob-app-menu__header-start {
	display: flex;
	align-items: center;
	gap: var(--ds-size-2);
	/* Pushes the update/user/close controls to the end of the header. */
	flex: 1 1 auto;
	min-width: 0;
}

.ob-app-menu__home {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-size-2);
	padding: var(--ds-size-1) var(--ds-size-3);
	border-radius: var(--ds-border-radius-md);
	background: transparent;
	color: var(--ds-color-brand-text-default, var(--ds-color-neutral-text-default));
	font: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.ob-app-menu__home:hover {
	background: var(--ds-color-neutral-surface-hover);
	text-decoration: underline;
}

.ob-app-menu__home:focus-visible {
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: var(--ds-size-1);
}

.ob-app-menu__pane-toggle {
	display: none;
	padding: var(--ds-size-1) var(--ds-size-3);
	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default);
	border-radius: var(--ds-border-radius-md);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Highlighted so a pending update is noticed, without looking like an error. */
.ob-app-menu__update {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-size-2);
	padding: var(--ds-size-1) var(--ds-size-3);
	border: var(--ds-border-width-default, 1px) solid var(--ds-color-warning-border-subtle);
	border-radius: var(--ds-border-radius-full, 999px);
	background: var(--ds-color-warning-surface-tinted);
	color: var(--ds-color-warning-text-default);
	font: inherit;
	font-weight: var(--ds-font-weight-medium, 500);
	cursor: pointer;
}

.ob-app-menu__update:hover {
	background: var(--ds-color-warning-surface-hover);
}

.ob-app-menu__update:focus-visible {
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: var(--ds-size-1);
}

.ob-app-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ds-size-1);
	border: none;
	border-radius: var(--ds-border-radius-md);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ob-app-menu__close:hover,
.ob-app-menu__pane-toggle:hover {
	background: var(--ds-color-neutral-surface-hover);
}

.ob-app-menu__close:focus-visible,
.ob-app-menu__pane-toggle:focus-visible {
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: var(--ds-size-1);
}

/*
 * The groups stack vertically so every heading gets a row of its own, and each
 * group's apps wrap into as many columns as fit. The pane only ever scrolls
 * vertically.
 */
.ob-app-menu__columns {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-5);
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.ob-app-menu__group-title {
	margin: 0 0 var(--ds-size-2);
	font-size: var(--ds-heading-2xs-font-size, 1rem);
	font-weight: var(--ds-font-weight-semibold, 600);
	color: var(--ds-color-neutral-text-default);
}

.ob-app-menu__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	column-gap: var(--ds-size-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ob-app-menu__item {
	display: flex;
	align-items: center;
	gap: var(--ds-size-1);
	min-width: 0;
}

.ob-app-menu__link {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: var(--ds-size-1) var(--ds-size-2);
	border: none;
	border-radius: var(--ds-border-radius-sm);
	background: transparent;
	color: var(--ds-color-brand-text-default, var(--ds-color-neutral-text-default));
	font: inherit;
	text-align: start;
	text-decoration: none;
	line-height: 1.5;
	cursor: pointer;
}

.ob-app-menu__link:hover {
	background: var(--ds-color-neutral-surface-hover);
	text-decoration: underline;
}

.ob-app-menu__link:focus-visible {
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: calc(var(--ds-size-1) * -1);
}

/*
 * Favorite toggle. Hidden until the entry is hovered or focused to keep the
 * list calm, but always visible for entries that already are favorites so the
 * state is readable at a glance.
 */
.ob-app-menu__favorite {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: var(--ds-size-1);
	border: none;
	border-radius: var(--ds-border-radius-sm);
	background: transparent;
	color: var(--ds-color-neutral-text-subtle);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
}

.ob-app-menu__item:hover .ob-app-menu__favorite,
.ob-app-menu__item:focus-within .ob-app-menu__favorite,
.ob-app-menu__favorite[data-favorite="true"] {
	opacity: 1;
	pointer-events: auto;
}

.ob-app-menu__favorite[data-favorite="true"] {
	color: var(--ds-color-warning-base-default, #c77300);
}

.ob-app-menu__favorite:hover {
	background: var(--ds-color-neutral-surface-hover);
	color: var(--ds-color-warning-base-hover, var(--ds-color-neutral-text-default));
}

.ob-app-menu__favorite:focus-visible {
	opacity: 1;
	pointer-events: auto;
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: calc(var(--ds-size-1) * -1);
}

@media (prefers-reduced-motion: no-preference) {
	.ob-app-menu__favorite {
		transition: opacity 120ms ease-out;
	}
}

/* Without a pointer there is no hover, so always show the toggles. */
@media (hover: none) {
	.ob-app-menu__favorite {
		opacity: 1;
		pointer-events: auto;
	}
}

.ob-app-menu__message {
	margin: var(--ds-size-6) 0;
	text-align: center;
	color: var(--ds-color-neutral-text-subtle);
}

/* -------------------------------------------------------------------------- */
/* User disclosure menu                                                       */
/* -------------------------------------------------------------------------- */

.ob-app-menu-user {
	position: relative;
	margin-inline-start: auto;
}

.ob-app-menu-user__trigger {
	display: flex;
	align-items: center;
	gap: var(--ds-size-2);
	max-width: 18rem;
	padding: var(--ds-size-1) var(--ds-size-2);
	border: none;
	border-radius: var(--ds-border-radius-md);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.ob-app-menu-user__trigger:hover {
	background: var(--ds-color-neutral-surface-hover);
}

.ob-app-menu-user__trigger:focus-visible {
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: var(--ds-size-1);
}

.ob-app-menu-user__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ds-size-10);
	height: var(--ds-size-10);
	overflow: hidden;
	border-radius: var(--ds-border-radius-full, 50%);
	background: var(--ds-color-neutral-surface-tinted, var(--ds-color-neutral-background-tinted));
	color: var(--ds-color-neutral-text-subtle);
}

.ob-app-menu-user__avatar > svg {
	width: 70%;
	height: 70%;
}

.ob-app-menu-user__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ob-app-menu-user__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.ob-app-menu-user__name {
	overflow: hidden;
	font-weight: var(--ds-font-weight-medium, 500);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ob-app-menu-user__domain {
	overflow: hidden;
	color: var(--ds-color-neutral-text-subtle);
	font-size: var(--ds-body-xs-font-size, 0.875em);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ob-app-menu-user__list {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + var(--ds-size-1));
	z-index: 1;
	min-width: 14rem;
	margin: 0;
	padding: var(--ds-size-1);
	list-style: none;
	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle);
	border-radius: var(--ds-border-radius-md);
	background: var(--ds-color-neutral-background-default);
	box-shadow: var(--ds-shadow-md);
}

.ob-app-menu-user__list[hidden] {
	display: none;
}

.ob-app-menu-user__list a,
.ob-app-menu-user__list button {
	display: block;
	width: 100%;
	padding: var(--ds-size-2) var(--ds-size-3);
	border: none;
	border-radius: var(--ds-border-radius-sm);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.ob-app-menu-user__list a:hover,
.ob-app-menu-user__list button:hover {
	background: var(--ds-color-neutral-surface-hover);
}

.ob-app-menu-user__list a:focus-visible,
.ob-app-menu-user__list button:focus-visible {
	outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer);
	outline-offset: calc(var(--ds-size-1) * -1);
}

.ob-app-menu-user__item--divided {
	margin-block-start: var(--ds-size-1);
	padding-block-start: var(--ds-size-1);
	border-block-start: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle);
}

/* -------------------------------------------------------------------------- */
/* Narrow viewports: one pane at a time, defaulting to the app list           */
/* -------------------------------------------------------------------------- */

@media (width < 48rem) {
	.ob-app-menu {
		max-width: 100vw;
		max-height: 100dvh;
		border: none;
		border-radius: 0;
		inset: 0;
	}

	.ob-app-menu__panel {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	.ob-app-menu__rail,
	.ob-app-menu__content {
		grid-area: 1 / 1;
		min-width: 0;
	}

	.ob-app-menu__rail {
		border-inline-end: none;
	}

	.ob-app-menu__pane-toggle {
		display: inline-block;
	}

	.ob-app-menu[data-pane="apps"] .ob-app-menu__rail,
	.ob-app-menu[data-pane="groups"] .ob-app-menu__columns,
	.ob-app-menu[data-pane="groups"] .ob-app-menu__message {
		display: none;
	}

	/*
	 * Both panes share the same grid cell, so the content pane still covers the
	 * rail even when its list is hidden. Letting clicks through keeps the group
	 * buttons usable, while the header itself stays interactive.
	 */
	.ob-app-menu[data-pane="groups"] .ob-app-menu__content {
		pointer-events: none;
	}

	.ob-app-menu[data-pane="groups"] .ob-app-menu__content-header {
		pointer-events: auto;
	}

	.ob-app-menu[data-pane="groups"] .ob-app-menu__rail {
		/* Keep the header (with the pane toggle) visible above the rail. */
		padding-block-start: calc(var(--ds-size-4) + var(--ds-size-12) + var(--ds-size-4));
	}

	.ob-app-menu-user__meta {
		display: none;
	}

	/* Not enough room for the label next to the pane toggle and user menu. */
	.ob-app-menu__update-label,
	.ob-app-menu__home-label {
		display: none;
	}

	.ob-app-menu__update {
		padding-inline: var(--ds-size-2);
	}

	.ob-app-menu__home {
		padding-inline: var(--ds-size-2);
	}
}