/**
 * Restaurant Branch Menu — frontend styles.
 *
 * Every rule is scoped under .rbm-menu and every class is rbm- prefixed, so
 * nothing here can reach the surrounding theme. Design tokens are exposed as
 * custom properties on the root element: a theme can restyle the whole menu
 * by overriding those, without fighting specificity.
 *
 * @package RestaurantBranchMenu
 */

.rbm-menu {
	/* Palette — warm neutral, tuned to sit behind food photography. */
	--rbm-ink: #1b1815;
	--rbm-ink-soft: #5f574d;
	--rbm-ink-faint: #7a7164;
	--rbm-surface: #ffffff;
	--rbm-surface-sunk: #f6f3ee;
	--rbm-line: #e4ddd2;
	--rbm-line-strong: #cdc3b4;
	--rbm-accent: #8a6a35;
	--rbm-accent-ink: #ffffff;
	--rbm-sale: #9a3412;

	/* Type — inherits the theme's body face, pairs it with a serif display. */
	--rbm-font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
	--rbm-font-body: inherit;

	/* Rhythm */
	--rbm-gap: clamp(1.75rem, 3.5vw, 3rem);
	--rbm-radius: 14px;
	--rbm-radius-sm: 8px;
	--rbm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	box-sizing: border-box;
	container-type: inline-size;
	margin: 0 auto;
	max-width: 74rem;
	color: var(--rbm-ink);
	font-family: var(--rbm-font-body);
	line-height: 1.6;
	text-align: left;
}

.rbm-menu *,
.rbm-menu *::before,
.rbm-menu *::after {
	box-sizing: border-box;
}

.rbm-menu :focus-visible {
	outline: 2px solid var(--rbm-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.rbm-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */

.rbm-menu__header {
	margin: 0 0 var(--rbm-gap);
	text-align: center;
}

.rbm-menu__title {
	margin: 0;
	color: var(--rbm-ink);
	font-family: var(--rbm-font-display);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.rbm-menu__subtitle {
	margin: 0.75rem auto 0;
	max-width: 46ch;
	color: var(--rbm-ink-soft);
	font-size: 1.0625rem;
}

.rbm-menu__rule {
	display: block;
	width: 3.5rem;
	height: 1px;
	margin: 1.5rem auto 0;
	background: var(--rbm-line-strong);
}

.rbm-menu__notice {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border-left: 2px solid var(--rbm-accent);
	background: var(--rbm-surface-sunk);
	color: var(--rbm-ink-soft);
	font-size: 0.9375rem;
}

/* ----------------------------------------------------------------------
 * Branch selector
 * ------------------------------------------------------------------- */

.rbm-branches {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin: 0 0 1.5rem;
	flex-wrap: wrap;
}

.rbm-branches__label {
	color: var(--rbm-ink-faint);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rbm-branches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * On narrow screens wrapping branch pills onto several rows pushes the menu
 * itself below the fold, so they scroll sideways like the category rail.
 */
@media (max-width: 40rem) {
	.rbm-branches {
		display: block;
	}

	.rbm-branches__label {
		display: block;
		margin-bottom: 0.5rem;
	}

	.rbm-branches__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
		-webkit-overflow-scrolling: touch;
	}

	.rbm-branches__list::-webkit-scrollbar {
		display: none;
	}

	.rbm-branches__item {
		scroll-snap-align: start;
	}

	.rbm-branch {
		white-space: nowrap;
	}
}

.rbm-branches__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rbm-branch {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--rbm-line);
	border-radius: 999px;
	background: var(--rbm-surface);
	color: var(--rbm-ink-soft);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: border-color 0.25s var(--rbm-ease), color 0.25s var(--rbm-ease), background-color 0.25s var(--rbm-ease);
}

.rbm-branch:hover,
.rbm-branch:focus-visible {
	border-color: var(--rbm-line-strong);
	color: var(--rbm-ink);
}

.rbm-branch.is-active {
	border-color: var(--rbm-ink);
	background: var(--rbm-ink);
	color: #fff;
}

/*
 * Secondary labels use a dedicated token rather than opacity: compositing a
 * mid tone against the page drops it below the 4.5:1 contrast floor.
 */
.rbm-branch__city {
	color: var(--rbm-ink-faint);
	font-size: 0.8125rem;
}

.rbm-branch.is-active .rbm-branch__city {
	color: inherit;
	opacity: 0.75;
}

/* ----------------------------------------------------------------------
 * Category filter
 * ------------------------------------------------------------------- */

.rbm-filter {
	position: relative;
	margin: 0 0 var(--rbm-gap);
	border-bottom: 1px solid var(--rbm-line);
}

.rbm-filter__list {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0 0 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
	-webkit-overflow-scrolling: touch;
}

.rbm-filter__list::-webkit-scrollbar {
	display: none;
}

.rbm-filter__item {
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.rbm-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.05rem;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--rbm-ink-soft);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.25s var(--rbm-ease), background-color 0.25s var(--rbm-ease), border-color 0.25s var(--rbm-ease);
}

.rbm-pill:hover,
.rbm-pill:focus-visible {
	border-color: var(--rbm-line);
	color: var(--rbm-ink);
}

.rbm-pill.is-active {
	border-color: var(--rbm-pill-accent, var(--rbm-ink));
	background: var(--rbm-pill-accent, var(--rbm-ink));
	color: var(--rbm-accent-ink);
}

.rbm-pill__count {
	color: var(--rbm-ink-faint);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.rbm-pill.is-active .rbm-pill__count {
	color: inherit;
	opacity: 0.75;
}

/*
 * A category with nothing in it at the selected branch is de-emphasised but
 * still selectable — disabling it would strand keyboard users mid-tablist.
 */
.rbm-pill.is-empty:not(.is-active) {
	color: var(--rbm-ink-faint);
}

.rbm-pill.is-empty:not(.is-active) .rbm-pill__label {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ----------------------------------------------------------------------
 * Grid
 * ------------------------------------------------------------------- */

.rbm-grid {
	display: grid;
	gap: var(--rbm-gap);
	grid-template-columns: 1fr;
}

/*
 * `display: grid` outranks the user-agent rule for the hidden attribute, so
 * the grid has to opt out of display explicitly or it stays visible.
 */
.rbm-grid[hidden] {
	display: none;
}

@container (min-width: 34rem) {
	.rbm-menu--cols-2 .rbm-grid,
	.rbm-menu--cols-3 .rbm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 58rem) {
	.rbm-menu--cols-3 .rbm-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (min-width: 40rem) {
		.rbm-menu--cols-2 .rbm-grid,
		.rbm-menu--cols-3 .rbm-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.rbm-menu--cols-3 .rbm-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

.rbm-card--hidden {
	display: none;
}

/* ----------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------- */

.rbm-card {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
}

/*
 * Reveal. The stagger index is set per visible card by the script, capped so
 * a long menu never waits on a queue; without JavaScript every card simply
 * animates at once, which is the right fallback.
 */
.rbm-card--enter {
	animation: rbm-reveal 0.38s var(--rbm-ease) both;
	animation-delay: calc(var(--rbm-index, 0) * 35ms);
}

@keyframes rbm-reveal {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

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

/*
 * Initial stagger for the server-rendered order. After a filter the script
 * rewrites --rbm-index inline to match what is actually visible. Cards past
 * the twelfth fall back to no delay: they are well below the fold, and a
 * queue that keeps growing would feel sluggish rather than considered.
 */
.rbm-grid > .rbm-card:nth-child(1) { --rbm-index: 0; }
.rbm-grid > .rbm-card:nth-child(2) { --rbm-index: 1; }
.rbm-grid > .rbm-card:nth-child(3) { --rbm-index: 2; }
.rbm-grid > .rbm-card:nth-child(4) { --rbm-index: 3; }
.rbm-grid > .rbm-card:nth-child(5) { --rbm-index: 4; }
.rbm-grid > .rbm-card:nth-child(6) { --rbm-index: 5; }
.rbm-grid > .rbm-card:nth-child(7) { --rbm-index: 6; }
.rbm-grid > .rbm-card:nth-child(8) { --rbm-index: 7; }
.rbm-grid > .rbm-card:nth-child(9) { --rbm-index: 8; }
.rbm-grid > .rbm-card:nth-child(10) { --rbm-index: 9; }
.rbm-grid > .rbm-card:nth-child(11) { --rbm-index: 10; }
.rbm-grid > .rbm-card:nth-child(12) { --rbm-index: 11; }

.rbm-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--rbm-radius);
	background: var(--rbm-surface-sunk);
	/* Reserving the box means the grid never shifts as photos arrive. */
	aspect-ratio: 4 / 3;
}

.rbm-card__image,
.rbm-card__media .rbm-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.42s var(--rbm-ease);
}

.rbm-card:hover .rbm-card__image,
.rbm-card:focus-within .rbm-card__image {
	transform: scale(1.03);
}

/*
 * A dish with no photo yet. Treated as a designed state — inset artwork on a
 * tinted ground with a hairline frame — so it reads as "no photograph" rather
 * than as an image that failed to load. It does not zoom on hover, because
 * flat artwork magnified looks like a mistake.
 */
.rbm-card__media--placeholder {
	background: var(--rbm-surface-sunk);
	box-shadow: inset 0 0 0 1px var(--rbm-line);
}

/*
 * Full bleed rather than inset: the artwork carries its own ground at the
 * same 4:3 ratio, so padding it would draw a second rectangle inside the
 * frame. The hairline above is all the definition it needs.
 */
.rbm-card__media--placeholder .rbm-image {
	object-fit: cover;
	opacity: 0.92;
	transition: opacity 0.42s var(--rbm-ease);
}

.rbm-card:hover .rbm-card__media--placeholder .rbm-image,
.rbm-card:focus-within .rbm-card__media--placeholder .rbm-image {
	transform: none;
	opacity: 1;
}

.rbm-card__flag {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background: rgba(27, 24, 21, 0.82);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}

.rbm-card__flag[hidden] {
	display: none;
}

.rbm-card__flag-icon {
	color: #e8c07d;
}

.rbm-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.rbm-card__heading {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.rbm-card__name {
	margin: 0;
	color: var(--rbm-ink);
	font-family: var(--rbm-font-display);
	font-size: 1.3125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.rbm-card__link {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.35s var(--rbm-ease);
}

.rbm-card__link:hover,
.rbm-card__link:focus-visible {
	background-size: 100% 1px;
}

/* The dotted leader is the one flourish borrowed from printed menus. */
.rbm-card__leader {
	flex: 1 1 auto;
	min-width: 1.5rem;
	height: 0;
	border-bottom: 1px dotted var(--rbm-line-strong);
	transform: translateY(-0.25rem);
}

.rbm-card__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	color: var(--rbm-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rbm-card__price-was {
	color: var(--rbm-ink-faint);
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: line-through;
}

.rbm-card__price-was[hidden] {
	display: none;
}

.rbm-card--on-sale .rbm-card__price-now {
	color: var(--rbm-sale);
}

.rbm-card__price[hidden],
.rbm-card__leader[hidden],
.rbm-card__variants[hidden],
.rbm-card__variant[hidden] {
	display: none;
}

/* Several portions: each gets its own line, with the same dotted leader the
   single-price heading uses so the two layouts read as one design. */
.rbm-card__variants {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin: 0.15rem 0 0;
	padding: 0;
	list-style: none;
}

.rbm-card__variant {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0;
}

.rbm-card__variant-name {
	color: var(--rbm-ink-soft);
	font-size: 0.9688rem;
}

.rbm-card__variant-price {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	color: var(--rbm-ink);
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rbm-card__desc {
	margin: 0;
	color: var(--rbm-ink-soft);
	font-size: 0.9688rem;
	line-height: 1.65;
}

.rbm-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.15rem 0 0;
	padding: 0;
	list-style: none;
}

.rbm-tag {
	display: inline-block;
	margin: 0;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--rbm-line);
	border-radius: var(--rbm-radius-sm);
	color: var(--rbm-ink-faint);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	list-style: none;
}

.rbm-tag--vegan,
.rbm-tag--vegetarian {
	border-color: #cfe3d2;
	color: #2f6b43;
}

.rbm-tag--spicy {
	border-color: #f0d2cd;
	color: #a3402c;
}

.rbm-tag--gluten_free {
	border-color: #ece0c4;
	color: #7a5c1f;
}

.rbm-card__note {
	margin: 0;
	color: var(--rbm-ink-faint);
	font-size: 0.8125rem;
	font-style: italic;
}

.rbm-card__note[hidden] {
	display: none;
}

/* ----------------------------------------------------------------------
 * List layout — image beside the dish, closer to a printed menu
 * ------------------------------------------------------------------- */

.rbm-menu--layout-list .rbm-grid {
	grid-template-columns: 1fr;
	gap: 0;
}

.rbm-menu--layout-list .rbm-card {
	flex-direction: row;
	align-items: flex-start;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	padding: clamp(1.25rem, 3vw, 1.75rem) 0;
	border-bottom: 1px solid var(--rbm-line);
}

.rbm-menu--layout-list .rbm-card:last-of-type {
	border-bottom: 0;
}

.rbm-menu--layout-list .rbm-card__media {
	flex: 0 0 clamp(7rem, 22%, 12rem);
	width: clamp(7rem, 22%, 12rem);
}

.rbm-menu--layout-list .rbm-card__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 0.15rem;
}

/*
 * The thumbnail is too narrow for the full "Signature" pill, so it collapses
 * to the star alone. The label stays in the DOM for assistive technology.
 */
.rbm-menu--layout-list .rbm-card__flag {
	top: 0.5rem;
	left: 0.5rem;
	gap: 0;
	padding: 0.32rem;
	border-radius: 999px;
	font-size: 0;
}

.rbm-menu--layout-list .rbm-card__flag-icon {
	width: 12px;
	height: 12px;
}

@media (max-width: 34rem) {
	.rbm-menu--layout-list .rbm-card {
		flex-direction: column;
	}

	.rbm-menu--layout-list .rbm-card__media {
		flex-basis: auto;
		width: 100%;
	}
}

/* ----------------------------------------------------------------------
 * Empty states
 * ------------------------------------------------------------------- */

.rbm-menu__empty {
	margin: 0;
	padding: 3rem 1rem;
	color: var(--rbm-ink-soft);
	text-align: center;
}

.rbm-menu__empty[hidden] {
	display: none;
}

.rbm-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
	border: 1px solid var(--rbm-line);
	border-radius: var(--rbm-radius);
	background: var(--rbm-surface-sunk);
	text-align: center;
	animation: rbm-reveal 0.4s var(--rbm-ease) both;
}

.rbm-empty[hidden] {
	display: none;
}

.rbm-empty__message {
	margin: 0;
	max-width: 40ch;
	color: var(--rbm-ink-soft);
	font-family: var(--rbm-font-display);
	font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
	line-height: 1.5;
}

.rbm-empty__reset {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.25rem;
	border: 1px solid var(--rbm-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--rbm-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.25s var(--rbm-ease), color 0.25s var(--rbm-ease);
}

.rbm-empty__reset:hover,
.rbm-empty__reset:focus-visible {
	background: var(--rbm-ink);
	color: var(--rbm-surface);
}

@media (prefers-color-scheme: dark) {
	.rbm-empty__reset:hover,
	.rbm-empty__reset:focus-visible {
		background: var(--rbm-accent);
		border-color: var(--rbm-accent);
		color: var(--rbm-accent-ink);
	}
}

.rbm-menu__hint {
	margin: 0;
	padding: 0 1rem 2rem;
	color: var(--rbm-ink-faint);
	font-size: 0.875rem;
	text-align: center;
}

/* ----------------------------------------------------------------------
 * Dark scheme
 * ------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.rbm-menu {
		--rbm-ink: #f2ede6;
		--rbm-ink-soft: #b8ae9f;
		--rbm-ink-faint: #9c9386;
		--rbm-surface: #171513;
		--rbm-surface-sunk: #211e1a;
		--rbm-line: #34302a;
		--rbm-line-strong: #4b453d;
		--rbm-accent: #d3ab6a;
		--rbm-accent-ink: #1b1815;
		--rbm-sale: #f0a58a;
	}

	.rbm-branch.is-active {
		border-color: var(--rbm-accent);
		background: var(--rbm-accent);
		color: var(--rbm-accent-ink);
	}

	.rbm-pill.is-active {
		border-color: var(--rbm-pill-accent, var(--rbm-accent));
		background: var(--rbm-pill-accent, var(--rbm-accent));
		color: var(--rbm-accent-ink);
	}

	.rbm-tag--vegan,
	.rbm-tag--vegetarian {
		border-color: #33513c;
		color: #9ed2ac;
	}

	.rbm-tag--spicy {
		border-color: #5b342c;
		color: #e8a08c;
	}

	.rbm-tag--gluten_free {
		border-color: #54473a;
		color: #dcbe86;
	}
}

/* ----------------------------------------------------------------------
 * Motion preferences
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rbm-menu *,
	.rbm-menu *::before,
	.rbm-menu *::after {
		animation-duration: 0.001ms !important;
		/* Without this the stagger would still hold content back. */
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.rbm-card:hover .rbm-card__image,
	.rbm-card:focus-within .rbm-card__image {
		transform: none;
	}
}

/* ----------------------------------------------------------------------
 * Category navigation: underline variant
 * ------------------------------------------------------------------- */

.rbm-filter--underline .rbm-pill {
	padding-left: 0.35rem;
	padding-right: 0.35rem;
	margin: 0 0.6rem;
	border: 0;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	background: none;
}

.rbm-filter--underline .rbm-pill:hover,
.rbm-filter--underline .rbm-pill:focus-visible {
	border-bottom-color: var(--rbm-line-strong);
	background: none;
	color: var(--rbm-ink);
}

.rbm-filter--underline .rbm-pill.is-active {
	border-bottom-color: var(--rbm-pill-accent, var(--rbm-ink));
	background: none;
	color: var(--rbm-ink);
}

.rbm-filter--underline .rbm-pill.is-active .rbm-pill__count {
	color: var(--rbm-ink-faint);
	opacity: 1;
}

/* ----------------------------------------------------------------------
 * REST mode: load more and loading state
 * ------------------------------------------------------------------- */

.rbm-menu__more {
	margin: var(--rbm-gap) 0 0;
	text-align: center;
}

.rbm-menu__more[hidden],
.rbm-more[hidden] {
	display: none;
}

.rbm-more {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.6rem;
	border: 1px solid var(--rbm-line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--rbm-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.25s var(--rbm-ease), color 0.25s var(--rbm-ease), border-color 0.25s var(--rbm-ease);
}

.rbm-more:hover,
.rbm-more:focus-visible {
	border-color: var(--rbm-ink);
	background: var(--rbm-ink);
	color: var(--rbm-surface);
}

/* A quiet dim while a page is in flight — no spinner, no layout change. */
.rbm-menu--loading .rbm-grid {
	opacity: 0.55;
	transition: opacity 0.25s var(--rbm-ease);
}

@media (prefers-color-scheme: dark) {
	.rbm-more:hover,
	.rbm-more:focus-visible {
		border-color: var(--rbm-accent);
		background: var(--rbm-accent);
		color: var(--rbm-accent-ink);
	}
}