@charset "utf-8";

/* =============================================================================
* Single-purpose helpers.
* =========================================================================== */
@layer utilities {

/* =============================================================================
* Absolute resets
* =========================================================================== */

/* Spacing */
.margin-none {
	margin: 0 !important;
}
/* .margin-block-sm {
	margin-block: var(--size-sm) !important;
}
.margin-block-start-sm {
	margin-block-start: var(--size-sm) !important;
}
.margin-block-end-sm {
	margin-block-end: var(--size-sm) !important;
} */
.padding-none {
	padding: 0 !important;
}

/* Fix for non-collapsing margins on individual elements. */
.trim-inner-margins > *,
.trim-margin {
	margin-block: 0 !important;
}
.trim-child-margins > :first-child,
.trim-margin-start {
	margin-block-start: 0 !important;
}
.trim-child-margins > :last-child,
.trim-margin-end {
	margin-block-end: 0 !important;
}

/* =============================================================================
* Behavioral or helper utilities
* =========================================================================== */

/* Backgrounds */
.background-transparent {
	background-color: transparent;
}

/* Layout */
.flex-nowrap {
	flex-wrap: nowrap;
}
.grid-full-span {
	grid-column: 1 / -1;
}
.inline-stretch {
	/* Both properties are needed to ensure consistency across browsers. */
	flex: 1 1 auto; /* Grow and shrink to fill remaining space */
	width: 100%;    /* Fill width of wrapper, regardless of intrinsic width */
}

/* Font style */
.text-italic {
	font-style: italic;
}
.text-oblique {
	font-style: oblique;
}
.text-transparent {
	color: transparent;
}
.text-underline {
	text-decoration: underline;
}

/* Font weight */
.text-light {
	font-weight: var(--font-weight-light);
}
.text-regular {
	font-weight: var(--font-weight-regular);
}
.text-medium {
	font-weight: var(--font-weight-regular);
}
.text-semibold {
	font-weight: var(--font-weight-bold);
}
.text-bold {
	font-weight: var(--font-weight-bold);
}

/* Spacings */
.gap-xs {
	gap: var(--size-xs);
}
.gap-sm {
	gap: var(--size-sm);
}
.gap-md {
	gap: var(--size-md);
}
.gap-lg {
	gap: var(--size-lg);
}
.gap-xl {
	gap: var(--size-xl);
}

.margin-xs {
	margin-block: var(--size-xs);
}
.margin-sm {
	margin-block: var(--size-sm);
}
.margin-md {
	margin-block: var(--size-md);
}
.margin-lg {
	margin-block: var(--size-lg);
}
.margin-xl {
	margin-block: var(--size-xl);
}

/* Text adjustments */
.flex-align-baseline {
	align-items: baseline;
}
.text-left {
	text-align: start;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: end;
}
.text-justify {
	text-align: justify;
}
.text-wrap-anywhere {
	word-break: break-all;
}

/* =============================================================================
* Miscellaneous
* =========================================================================== */

.tooltip {
	&:is(:focus-visible, :hover) .tooltip-text {
		visibility: visible;
	}

	&:focus-visible {
		outline: var(--width-border) solid var(--interactive-outline);
		outline-offset: 2px;
		z-index: 99;
	}

	& .tooltip-text {
		background-color: var(--color-surface-1);
		border: var(--size-3xs) solid var(--color-border);

		bottom: calc(100% + var(--size-xs));
		inline-size: max-content;
		max-inline-size: 16ch;

		left: 50%;
		transform: translateX(-50%);

		padding-inline: var(--size-xs);
		text-align: center;

		position: absolute;
		visibility: hidden;
		z-index: 1;

		/* Optional override hook */
		right: var(--right, auto);
	}
}

/* =============================================================================
* Custom styling
* =========================================================================== */
:where(.title) {
	--color-text: var(--color-text-1);

	color: var(--color-text);
	font-weight: 600;
	margin-block: var(--size-md) var(--size-sm);
}

/* =============================================================================
* Accessibility
* =========================================================================== */
@media (forced-colors: active) {
	* {
		background-image: none !important;
	}
	a {
		color: LinkText;
	}
	body {
		background-color: Canvas;
		border-color: CanvasText;
		color: CanvasText;
		outline: 2px solid Highlight;
	}
}

/* Screen reader only */
.sr-only {
	block-size: 1px;
	border: 0;
	clip-path: inset(0%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}
}