.popover {
	width: min(24rem, calc(100vw - 2 * var(--s-4)));
}

.settings {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-2);
	font-size: var(--font-xs);
}

.section {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.label {
	font-size: var(--font-2xs);
	font-weight: var(--weight-semi);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-high);
}

.note {
	margin: 0;
	font-size: var(--font-2xs);
	color: var(--color-text-high);
	line-height: 1.5;
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-3);
	align-items: center;
}

.rowLabel {
	font-size: var(--font-2xs);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
}

.number {
	width: 6rem;
	height: var(--field-size-sm);
	padding: 0 var(--s-2);
	border: var(--border-style);
	border-radius: var(--radius-field);
	background-color: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	font-size: var(--font-xs);
	font-variant-numeric: tabular-nums;

	&:focus-visible {
		outline: var(--focus-ring);
		outline-offset: 1px;
	}
}

.hint {
	flex-basis: 100%;
	font-size: var(--font-3xs);
	color: var(--color-text-high);
}