@layer external, theme, normalize, base, native_popovers, common_components, components, utilities, top_layer;
@layer common_components {
	.MyButton {
		position: relative;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		white-space: nowrap;
		flex-shrink: 0;

		height: 36px;
		padding: 6px 10px;
		border-radius: 6px;
		outline-offset: -2px;

		user-select: none;

		font-size: 0.875rem;
		font-weight: 500;

		transition:
			background-color 0.1s linear,
			box-shadow 0.1s linear;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			cursor: pointer;
		}

		&:is(:disabled, .MyButton-state-disabled) {
			cursor: default;
		}

		&:not(:is(:disabled, .MyButton-state-disabled)):is(:hover, :focus, [data-focused]) {
			z-index: 1;
		}

		&:focus-visible {
			outline-color: var(--color-fg-12);
		}

		&[aria-busy="true"] {
			cursor: wait;
		}

		& > svg {
			flex: none;
			width: 1rem;
			height: 1rem;
		}
	}

	/* Variants */
	.MyButton-variant-default {
		color: var(--color-fg-10);
		background: linear-gradient(var(--color-base-1-07), var(--color-base-1-06));
		box-shadow:
			inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
			inset 0 -1px 0 color-mix(in oklch, var(--color-base-1-02) 50%, transparent),
			0 2px 4px black;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:is(:hover, :focus-visible):not(:active),
			&[aria-expanded="true"] {
				color: var(--color-fg-11);
				background: linear-gradient(var(--color-base-1-08), var(--color-base-1-07));
				box-shadow:
					inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-base-1-02) 50%, transparent),
					0 2px 4px black;
			}

			&:active {
				color: var(--color-fg-12);
				background: linear-gradient(var(--color-base-1-09), var(--color-base-1-08));
				box-shadow:
					inset 0 3px 4px color-mix(in oklch, black 40%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 10%, transparent);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-03);
			background: var(--color-base-1-04);
			box-shadow: none;
		}
	}

	.MyButton-variant-default-embedded {
		--MyButton-border-color: var(--color-base-1-07);

		color: var(--color-fg-10);
		background: linear-gradient(var(--color-base-1-07), var(--color-base-1-06));
		box-shadow:
			inset 0 0 0 1px var(--MyButton-border-color),
			inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
			inset 0 -1px 0 color-mix(in oklch, var(--color-base-1-02) 50%, transparent);

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:is(:hover, :focus, :focus-visible, [data-focused]):not(:active),
			&[aria-expanded="true"] {
				color: var(--color-fg-11);
				background: linear-gradient(var(--color-base-1-08), var(--color-base-1-07));
				box-shadow:
					inset 0 0 0 1px var(--MyButton-border-color),
					inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-base-1-02) 50%, transparent);
			}

			&:active {
				color: var(--color-fg-12);
				background: linear-gradient(var(--color-base-1-09), var(--color-base-1-08));
				box-shadow:
					inset 0 0 0 1px var(--MyButton-border-color),
					inset 0 3px 4px color-mix(in oklch, black 40%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 10%, transparent);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-03);
			background: var(--color-base-1-04);
			box-shadow: inset 0 0 0 1px var(--MyButton-border-color);
		}

		.MyInput-variant-floating & {
			--MyButton-border-color: var(--color-base-alt-1-09);
		}
	}

	.MyButton-variant-accent {
		color: var(--color-fg-11);
		background: linear-gradient(var(--color-accent-02), var(--color-accent-01));
		box-shadow:
			inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 12%, transparent),
			inset 0 -1px 0 color-mix(in oklch, var(--color-accent-06) 15%, transparent),
			0 2px 4px black;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:focus-visible {
				background: linear-gradient(var(--color-accent-03), var(--color-accent-02));
			}

			&:hover {
				color: var(--color-fg-12);
				background: linear-gradient(var(--color-accent-03), var(--color-accent-02));
			}

			&:active {
				background: linear-gradient(var(--color-accent-04), var(--color-accent-03));
				box-shadow:
					inset 0 2px 4px color-mix(in oklch, black 30%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 6%, transparent);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
			background: var(--color-base-1-03);
			box-shadow: none;
		}

		&[aria-expanded="true"] {
			color: var(--color-fg-08);
		}
	}

	.MyButton-variant-destructive {
		background: var(--color-red-06);
		color: var(--color-fg-10);

		box-shadow:
			inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
			inset 0 -1px 0 color-mix(in oklch, var(--color-base-1-02) 50%, transparent),
			0 2px 4px black;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:hover {
				background: var(--color-red-07);
				color: var(--color-fg-11);
			}

			&:active {
				background: var(--color-red-08);
				color: var(--color-fg-12);
				box-shadow:
					inset 0 2px 4px color-mix(in oklch, black 28%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 5%, transparent);
			}
		}

		.dark & {
			&:not(:is(:disabled, .MyButton-state-disabled)) {
				&:hover {
					background: var(--color-red-06);
				}

				&:active {
					background: var(--color-red-07);
					box-shadow:
						inset 0 2px 4px color-mix(in oklch, black 28%, transparent),
						inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 5%, transparent);
				}
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			background: var(--color-base-1-04);
			color: var(--color-fg-04);
			box-shadow: none;
		}
	}

	.MyButton-variant-outline {
		color: var(--color-fg-08);
		background: linear-gradient(var(--color-base-1-04), var(--color-base-1-03));
		/* Border drawn as an inset ring so the box size matches borderless variants */
		box-shadow:
			inset 0 0 0 2px var(--color-base-1-09),
			inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
			inset 0 -1px 0 color-mix(in oklch, var(--color-base-1-02) 50%, transparent),
			0 2px 4px black;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:is(:hover, :focus-visible):not(:active),
			&[aria-expanded="true"] {
				color: var(--color-fg-10);
				background: linear-gradient(var(--color-base-1-05), var(--color-base-1-04));
				box-shadow:
					inset 0 0 0 2px var(--color-base-1-10),
					inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-base-1-02) 50%, transparent),
					0 2px 4px black;
			}

			&:active {
				background: linear-gradient(var(--color-base-1-06), var(--color-base-1-05));
				color: var(--color-fg-11);
				box-shadow:
					inset 0 0 0 2px var(--color-base-1-11),
					inset 0 3px 4px color-mix(in oklch, black 40%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 10%, transparent),
					0 2px 4px black;
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
			background: var(--color-base-1-03);
			box-shadow: none;
		}
	}

	.MyButton-variant-outline_destructive {
		padding: 8px 12px;
		/* `red-09`, not `red-08`: on this background `red-08` is 3.85:1, under the 4.5:1 that 14px text
		   needs. Hover and active step up from there, so each one still changes the text color. */
		color: var(--color-red-09);
		background: var(--color-base-1-03);
		box-shadow:
			inset 0 0 0 2px var(--color-red-05),
			0 1px 1px 0 rgb(0 0 0 / 0.04);

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:hover,
			&:focus-visible {
				color: var(--color-red-10);
				background: var(--color-red-02);
				box-shadow:
					inset 0 0 0 2px var(--color-red-06),
					0 1px 1px 0 rgb(0 0 0 / 0.04);
			}

			&:active {
				background: var(--color-red-02);
				color: var(--color-red-11);
				box-shadow:
					inset 0 2px 0 color-mix(in oklch, black 24%, transparent),
					inset 0 0 0 2px var(--color-red-07);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
			background: var(--color-base-1-03);
			box-shadow: none;
		}

		&[aria-expanded="true"] {
			color: var(--color-red-11);
			box-shadow:
				inset 0 0 0 2px var(--color-red-08),
				0 1px 1px 0 rgb(0 0 0 / 0.04);
		}
	}

	.MyButton-variant-secondary {
		background: var(--color-base-1-08);
		color: var(--color-fg-10);
		box-shadow:
			inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
			inset 0 -1px 0 color-mix(in oklch, var(--color-base-1-02) 50%, transparent),
			0 2px 4px black;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:hover,
			&:focus-visible {
				background: var(--color-base-1-09);
				color: var(--color-fg-11);
			}

			&:active {
				background: var(--color-base-1-10);
				color: var(--color-fg-12);
				box-shadow:
					inset 0 2px 4px color-mix(in oklch, black 28%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 5%, transparent);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			box-shadow: none;
		}
	}

	.MyButton-variant-secondary-subtle {
		background: var(--color-base-alt-1-05);
		color: var(--color-fg-09);

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:hover,
			&:focus-visible {
				background: var(--color-base-alt-1-06);
				color: var(--color-fg-11);
			}

			&:active {
				background: var(--color-base-alt-1-07);
				color: var(--color-fg-12);
			}
		}
	}

	.MyButton-variant-floating {
		--MyButton-border-color: var(--color-base-alt-1-08);

		background: linear-gradient(var(--color-base-alt-1-06), var(--color-base-alt-1-05));
		color: var(--color-fg-09);
		box-shadow:
			inset 0 0 0 1px var(--MyButton-border-color),
			inset 0 1px 2px oklch(1 0 0 / 0.2);

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:is(:hover, :focus-visible):not(:active),
			&[aria-expanded="true"] {
				background: linear-gradient(var(--color-base-alt-1-07), var(--color-base-alt-1-06));
				color: var(--color-fg-11);
				box-shadow:
					inset 0 0 0 1px var(--MyButton-border-color),
					inset 0 1px 2px oklch(1 0 0 / 0.24);
			}

			&:active {
				background: linear-gradient(var(--color-base-alt-1-08), var(--color-base-alt-1-07));
				color: var(--color-fg-12);
				box-shadow:
					inset 0 0 0 1px var(--MyButton-border-color),
					inset 0 3px 4px color-mix(in oklch, black 40%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 10%, transparent);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
			background: var(--color-base-alt-1-04);
			box-shadow: inset 0 0 0 1px var(--MyButton-border-color);
		}
	}

	.MyButton-variant-ghost {
		color: var(--color-fg-07);
		background: transparent;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:hover,
			&:focus-visible {
				background: var(--color-base-1-07);
				color: var(--color-fg-12);
			}

			&:active {
				background: var(--color-base-1-08);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
		}
	}

	.MyButton-variant-ghost-accent {
		background: transparent;
		color: var(--color-accent-06);

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:hover,
			&:focus-visible {
				background: var(--color-base-1-07);
				color: var(--color-accent-08);
			}

			&:active {
				background: var(--color-base-1-08);
				color: var(--color-accent-09);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
		}
	}

	.MyButton-variant-ghost_destructive {
		background: transparent;
		color: var(--color-red-09);

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:hover,
			&:focus-visible {
				background: var(--color-red-03);
				color: var(--color-red-11);
			}

			&:active {
				background: var(--color-red-04);
				color: var(--color-red-12);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
		}
	}

	.MyButton-variant-ghost-highlightable {
		color: var(--color-fg-07);
		background: transparent;
		padding: 8px 12px;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:is(:hover, :focus-visible):not(:active),
			&[aria-expanded="true"] {
				background: linear-gradient(var(--color-base-1-08), var(--color-base-1-07));
				color: var(--color-fg-11);
				box-shadow:
					inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 8%, transparent),
					inset 0 -1px 0 color-mix(in oklch, black 22%, transparent),
					0 4px 10px color-mix(in oklch, black 38%, transparent);
			}

			&:active {
				background: linear-gradient(var(--color-base-1-09), var(--color-base-1-08));
				color: var(--color-fg-12);
				box-shadow:
					inset 0 2px 4px color-mix(in oklch, black 32%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 5%, transparent);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
			box-shadow: none;
		}
	}

	.MyButton-variant-ghost-highlightable-alt {
		color: var(--color-fg-07);
		background: transparent;
		padding: 8px 12px;

		&:not(:is(:disabled, .MyButton-state-disabled)) {
			&:is(:hover, :focus-visible):not(:active),
			&[aria-expanded="true"] {
				background: var(--color-base-alt-1-12);
				color: var(--color-fg-12);
				box-shadow:
					inset 0 1px 0 color-mix(in oklch, var(--color-fg-11) 10%, transparent),
					inset 0 -1px 0 color-mix(in oklch, black 22%, transparent),
					0 4px 10px color-mix(in oklch, black 38%, transparent);
			}

			&:active {
				background: var(--color-base-alt-1-12);
				color: var(--color-fg-12);
				box-shadow:
					inset 0 2px 4px color-mix(in oklch, black 32%, transparent),
					inset 0 -1px 0 color-mix(in oklch, var(--color-fg-11) 5%, transparent);
			}
		}

		&:is(:disabled, .MyButton-state-disabled) {
			color: var(--color-fg-04);
			box-shadow: none;
		}
	}

	.MyButton-variant-link {
		background: transparent;
		color: var(--primary);
		text-underline-offset: 4px;

		&:hover {
			text-decoration: underline;
		}
	}

	.MyButtonIcon {
		width: 1rem;
		height: 1rem;
	}
}
@layer common_components {
	:where(.MyIcon) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		color: inherit;

		pointer-events: none;

		width: 1em;
		height: 1em;

		:where(& > *) {
			width: inherit;
			height: inherit;
		}
	}
}
@layer common_components {
	.MyTooltipInfoTrigger {
		cursor: help;
		outline-offset: 2px;
	}

	/* Do not add `contain`, `transform`, or `filter` here. They turn off `anchor()` for the native
	   arrow, and the arrow then stops pointing at the trigger. */
	.MyTooltipContent {
		position: relative;

		max-width: 320px;

		border-radius: 6px;
		border: 1px solid var(--color-base-1-10);

		background: var(--color-base-1-04);
		color: var(--color-fg-11);

		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

		padding: 6px 8px;

		/* The tooltip stays inside its trigger's DOM parent, so it inherits text styles from there.
		   Inside Monaco that would be the editor font and `nowrap`, and inside a bold badge a bold
		   weight. Reset them to the app values. */
		font-family: var(--app-font-sans);
		font-weight: 400;
		font-size: 0.8125rem;
		line-height: 1.25;
		white-space: normal;
	}

	.MyTooltipContent-variant-error {
		color: var(--color-red-10);
	}
}
/* All rules sit in one layer and use :where(), so any app rule wins over them. An app that uses
   layers must list native_popovers after its reset layers and before its component layers. */
@layer native_popovers {
	/* #region arrow host */
	/* A positioner that can hold an arrow: the tooltip and the hovercard. The arrow uses the host's own
	   anchor name to stay inside the box, and asks which fallback the browser picked with
	   @container anchored(fallback: ...). */
	:where(.np-ArrowHost) {
		anchor-name: var(--np-Arrow-box);
		container-type: anchored;
	}
	/* #endregion arrow host */

	/* #region arrow */
	/* The arrow is position: fixed, so its containing block is the viewport. That lets anchor() reach
	   the trigger and the positioner box. An absolute element inside the popover cannot query the trigger.
	   It points at the trigger's center and stays inside the box, padding away from the corners.
	   A transform, filter, or paint containment on the content makes the content the containing
	   block. Then every anchor() below uses its fallback, and the arrow sits centered on its side. */
	:where(.np-Arrow) {
		--np-Arrow-padding: 4px;
		--np-Arrow-x: clamp(
			calc(anchor(var(--np-Arrow-box) left, 0px) + var(--np-Arrow-padding)),
			calc(anchor(center, 50%) - var(--np-Arrow-size) / 2),
			calc(anchor(var(--np-Arrow-box) right, 100%) - var(--np-Arrow-padding) - var(--np-Arrow-size))
		);
		--np-Arrow-y: clamp(
			calc(anchor(var(--np-Arrow-box) top, 0px) + var(--np-Arrow-padding)),
			calc(anchor(center, 50%) - var(--np-Arrow-size) / 2),
			calc(anchor(var(--np-Arrow-box) bottom, 100%) - var(--np-Arrow-padding) - var(--np-Arrow-size))
		);

		position: fixed;
		position-anchor: var(--np-Arrow-anchor);
		position-visibility: anchors-visible;
		inset: auto;
		width: var(--np-Arrow-size);
		height: var(--np-Arrow-size);
		margin: 0;

		pointer-events: none;

		fill: var(--np-Arrow-fill, none);
		stroke: var(--np-Arrow-stroke, none);
		stroke-width: var(--np-Arrow-stroke-width, 0);
	}

	:where(.np-Arrow) > svg {
		width: 100%;
		height: 100%;

		rotate: var(--np-Arrow-rotate, 0deg);
	}

	/* A ring (box-shadow) has no gap under it, so skip the path that paints the background under a border. */
	:where(.np-Arrow[data-ring]) :where(.np-Arrow-underlay) {
		display: none;
	}

	/* The rules below put the arrow on the box edge that faces the trigger. The base overlaps the border
	   (--np-Arrow-border), like an HTML border. Top and bottom are physical here, because anchor()
	   works in viewport space. left and right placements follow the inline direction, like the placement
	   map, so RTL swaps them. */
	:where(.np-ArrowHost[data-side="top"]) :where(.np-Arrow) {
		--np-Arrow-rotate: 180deg;
		top: calc(anchor(var(--np-Arrow-box) bottom, calc(100% + var(--np-Arrow-border))) - var(--np-Arrow-border));
		left: var(--np-Arrow-x);
	}

	:where(.np-ArrowHost[data-side="bottom"]) :where(.np-Arrow) {
		--np-Arrow-rotate: 0deg;
		top: calc(
			anchor(var(--np-Arrow-box) top, calc(-1 * var(--np-Arrow-border))) - var(--np-Arrow-size) + var(--np-Arrow-border)
		);
		left: var(--np-Arrow-x);
	}

	:where(.np-ArrowHost[data-side="left"]:dir(ltr), .np-ArrowHost[data-side="right"]:dir(rtl)) :where(.np-Arrow) {
		--np-Arrow-rotate: 90deg;
		top: var(--np-Arrow-y);
		left: calc(anchor(var(--np-Arrow-box) right, calc(100% + var(--np-Arrow-border))) - var(--np-Arrow-border));
	}

	:where(.np-ArrowHost[data-side="right"]:dir(ltr), .np-ArrowHost[data-side="left"]:dir(rtl)) :where(.np-Arrow) {
		--np-Arrow-rotate: -90deg;
		top: var(--np-Arrow-y);
		left: calc(
			anchor(var(--np-Arrow-box) left, calc(-1 * var(--np-Arrow-border))) - var(--np-Arrow-size) +
				var(--np-Arrow-border)
		);
	}

	/* When the browser flips the layer to the other side of the trigger, move the arrow with it.
	   These are the fallbacks from placement_position_try_fallbacks that land on the opposite side. */
	@container anchored(fallback: flip-block) or anchored(fallback: flip-block flip-inline) or anchored(fallback: self-block-end span-self-inline-start) or anchored(fallback: self-block-end span-self-inline-end) {
		:where(.np-ArrowHost[data-side="top"]) :where(.np-Arrow) {
			--np-Arrow-rotate: 0deg;
			top: calc(
				anchor(var(--np-Arrow-box) top, calc(-1 * var(--np-Arrow-border))) - var(--np-Arrow-size) +
					var(--np-Arrow-border)
			);
		}
	}

	@container anchored(fallback: flip-block) or anchored(fallback: flip-block flip-inline) or anchored(fallback: self-block-start span-self-inline-start) or anchored(fallback: self-block-start span-self-inline-end) {
		:where(.np-ArrowHost[data-side="bottom"]) :where(.np-Arrow) {
			--np-Arrow-rotate: 180deg;
			top: calc(anchor(var(--np-Arrow-box) bottom, calc(100% + var(--np-Arrow-border))) - var(--np-Arrow-border));
		}
	}

	@container anchored(fallback: flip-inline) or anchored(fallback: flip-block flip-inline) or anchored(fallback: self-inline-end span-self-block-start) or anchored(fallback: self-inline-end span-self-block-end) {
		:where(.np-ArrowHost[data-side="left"]:dir(ltr)) :where(.np-Arrow) {
			--np-Arrow-rotate: -90deg;
			left: calc(
				anchor(var(--np-Arrow-box) left, calc(-1 * var(--np-Arrow-border))) - var(--np-Arrow-size) +
					var(--np-Arrow-border)
			);
		}

		:where(.np-ArrowHost[data-side="left"]:dir(rtl)) :where(.np-Arrow) {
			--np-Arrow-rotate: 90deg;
			left: calc(anchor(var(--np-Arrow-box) right, calc(100% + var(--np-Arrow-border))) - var(--np-Arrow-border));
		}
	}

	@container anchored(fallback: flip-inline) or anchored(fallback: flip-block flip-inline) or anchored(fallback: self-inline-start span-self-block-start) or anchored(fallback: self-inline-start span-self-block-end) {
		:where(.np-ArrowHost[data-side="right"]:dir(ltr)) :where(.np-Arrow) {
			--np-Arrow-rotate: 90deg;
			left: calc(anchor(var(--np-Arrow-box) right, calc(100% + var(--np-Arrow-border))) - var(--np-Arrow-border));
		}

		:where(.np-ArrowHost[data-side="right"]:dir(rtl)) :where(.np-Arrow) {
			--np-Arrow-rotate: -90deg;
			left: calc(
				anchor(var(--np-Arrow-box) left, calc(-1 * var(--np-Arrow-border))) - var(--np-Arrow-size) +
					var(--np-Arrow-border)
			);
		}
	}
	/* #endregion arrow */
}
/* All rules sit in one layer and use :where(), so any app rule wins over them. An app that uses
   layers must list native_popovers after its reset layers and before its component layers. */
@layer native_popovers {
	/* #region tooltip */
	:where(.np-TooltipPositioner) {
		--np-TooltipPositioner-gap: calc(var(--np-TooltipPositioner-gutter, 8px) + var(--np-ArrowHost-arrow-size, 0px) / 2);

		/* Use the natural width, like Ariakit's popover wrapper. With auto width, a start or end
		   placement near an edge wraps its text into the small space left, instead of flipping. */
		width: max-content;

		position: fixed;
		inset: auto;
		position-anchor: var(--np-TooltipPositioner-anchor);
		position-area: var(--np-TooltipPositioner-position-area);
		position-try-fallbacks: var(--np-TooltipPositioner-position-try-fallbacks);
		/* Hide the tooltip while its anchor is scrolled out of view. */
		position-visibility: anchors-visible;

		/* Clear the popover UA box. The UA overflow: auto would clip the arrow. */
		margin: 0;
		padding: 0;
		border: 0;
		overflow: visible;

		background: transparent;
		color: inherit;

		/* Only the content and the gap strips take the pointer. */
		pointer-events: none;
	}

	/* The gap goes on both edges of the axis that can flip. With one edge, a flip puts it on the far side. */
	:where(.np-TooltipPositioner[data-side="top"], .np-TooltipPositioner[data-side="bottom"]) {
		margin-block: var(--np-TooltipPositioner-gap);
	}

	:where(.np-TooltipPositioner[data-side="left"], .np-TooltipPositioner[data-side="right"]) {
		margin-inline: var(--np-TooltipPositioner-gap);
	}

	/* Two strips fill the gaps, so a pointer that crosses from the anchor to the tooltip stays over
	   the tooltip. This does the job of Ariakit's safe triangle for a small gap. */
	:where(.np-TooltipPositioner)::before,
	:where(.np-TooltipPositioner)::after {
		content: "";

		position: absolute;

		pointer-events: auto;
	}

	:where(.np-TooltipPositioner[data-side="top"], .np-TooltipPositioner[data-side="bottom"])::before,
	:where(.np-TooltipPositioner[data-side="top"], .np-TooltipPositioner[data-side="bottom"])::after {
		inset-inline: 0;
		block-size: var(--np-TooltipPositioner-gap);
	}

	:where(.np-TooltipPositioner[data-side="top"], .np-TooltipPositioner[data-side="bottom"])::before {
		inset-block-end: 100%;
	}

	:where(.np-TooltipPositioner[data-side="top"], .np-TooltipPositioner[data-side="bottom"])::after {
		inset-block-start: 100%;
	}

	:where(.np-TooltipPositioner[data-side="left"], .np-TooltipPositioner[data-side="right"])::before,
	:where(.np-TooltipPositioner[data-side="left"], .np-TooltipPositioner[data-side="right"])::after {
		inset-block: 0;
		inline-size: var(--np-TooltipPositioner-gap);
	}

	:where(.np-TooltipPositioner[data-side="left"], .np-TooltipPositioner[data-side="right"])::before {
		inset-inline-end: 100%;
	}

	:where(.np-TooltipPositioner[data-side="left"], .np-TooltipPositioner[data-side="right"])::after {
		inset-inline-start: 100%;
	}

	:where(.np-Tooltip) {
		position: relative;

		pointer-events: auto;
	}

	/* A tooltip with interactive={false} lets the pointer pass through to the page, gap strips included.
	   Keep this rule after the one above: both have zero specificity, so the later one wins. */
	:where(.np-TooltipPositioner[data-interactive="false"])::before,
	:where(.np-TooltipPositioner[data-interactive="false"])::after,
	:where(.np-TooltipPositioner[data-interactive="false"] > .np-Tooltip) {
		pointer-events: none;
	}

	/* The content takes focus only from a click on its text. Do not draw a ring for it. */
	:where(.np-Tooltip:focus) {
		outline: none;
	}
	/* #endregion tooltip */
}
@layer common_components {
	.MyModalBackdrop {
		position: fixed;
		inset: 0;

		background: black;

		filter: opacity(0.8);
		backdrop-filter: blur(2px);
	}

	.MyModalPopover {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		width: 90vw;
		max-width: 600px;
		max-height: 85vh;

		border-radius: 12px;
		border: 1px solid var(--color-base-1-05);

		background: linear-gradient(var(--color-base-1-03), var(--color-base-1-02));
		color: var(--color-fg-11);

		box-shadow:
			inset 0 1px 2px oklch(1 0 0 / 0.2),
			0 4px 6px oklch(0 0 0 / 0.3),
			0 8px 10px oklch(0 0 0 / 0.18);

		outline: none;

		contain: content;
	}

	.MyModalHeader {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
		gap: 4px;

		padding: 16px 48px 16px 20px;

		border-bottom: 1px solid var(--color-base-1-08);

		min-height: 70px;
	}

	.MyModalScrollableArea {
		max-height: calc(85vh - 140px);
		overflow-y: auto;
		padding: 20px;
	}

	.MyModalFooter {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 8px;

		padding: 16px 20px;

		border-top: 1px solid var(--color-base-1-08);

		min-height: 70px;
	}

	.MyModalHeading {
		margin: 0;
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.2;
		color: var(--color-fg-11);
	}

	.MyModalDescription {
		margin: 0;
		color: var(--color-fg-08);
	}

	.MyModalCloseTrigger {
		position: absolute;
		top: 0px;
		right: 0px;

		margin: 16px 16px 16px 0;
	}
}
@layer common_components {
	.MyIconButton.MyButton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px;

		width: 36px;
	}

	.MyIconButtonIcon {
		width: 16px;
		height: 16px;
	}
}