.bring-nav-link {
	background-color: transparent;
	border: 1px solid var(--primary-color);
	border-radius: 0.45rem;
	color: var(--primary-color);
	font-family: monospace;
	font-size: 0.9rem;
	padding: 0.6rem 0.9rem;
	position: absolute;
	text-decoration: none;
	top: 1rem;
}

.bring-nav-left {
	left: 1rem;
}

.bring-nav-right {
	right: 1rem;
}

.bring-nav-link:hover,
.bring-nav-link:focus-visible {
	background-color: rgba(116, 92, 151, 0.14);
	outline: none;
}

.bring-page {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: min(40rem, calc(100vw - 2rem));
	padding: 1.5rem 1rem 2rem;
}

.bring-copy {
	margin: 0;
}

.bring-status {
	margin: 0;
	min-height: 1.25rem;
}

.bring-status:empty {
	display: none;
}

.bring-status[data-state="error"] {
	color: #f28f8f;
}

.bring-status[data-state="loading"] {
	color: var(--secondary-color);
}

.bring-status[data-state="success"] {
	color: var(--secondary-color);
}

.bring-form,
.bring-results {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.bring-form > h2,
.bring-results > h2 {
	color: var(--primary-color);
	font-size: 1.1rem;
	margin: 0;
}

.bring-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: 100%;
}

.bring-field > span {
	color: var(--secondary-color);
	font-weight: bold;
}

.bring-number-field {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	width: 100%;
}

.bring-field > input,
.bring-number-field > input {
	background-color: #111111;
	border: 1px solid #EFF9F0;
	border-radius: 0.45rem;
	box-sizing: border-box;
	color: #EFF9F0;
	font-family: monospace;
	font-size: 0.9rem;
	padding: 0.6rem 0.75rem;
	width: 100%;
}

.bring-number-field > input {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	border-right: 0;
	flex: 1;
}

.bring-number-field > input::-webkit-outer-spin-button,
.bring-number-field > input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bring-number-field > input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.bring-stepper {
	display: flex;
	flex-direction: column;
	width: 2.75rem;
}

.bring-step-button {
	background-color: #111111;
	border: 1px solid #EFF9F0;
	border-radius: 0;
	color: var(--primary-color);
	cursor: pointer;
	flex: 1;
	font-family: monospace;
	font-size: 0.9rem;
	line-height: 1;
	padding: 0;
}

.bring-step-button:first-child {
	border-bottom: 0;
	border-top-right-radius: 0.45rem;
}

.bring-step-button:last-child {
	border-bottom-right-radius: 0.45rem;
}

.bring-step-button:hover,
.bring-step-button:focus-visible {
	background-color: #171717;
	outline: none;
}

.bring-step-button:active,
.bring-step-button.is-pressed {
	background-color: #222222;
	box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.12);
}

.bring-field > input[readonly] {
	color: #bfbfbf;
}

.bring-manual-input::-webkit-outer-spin-button,
.bring-manual-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bring-manual-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.bring-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding-top: 0.25rem;
}

.bring-actions > button,
.bring-actions > button {
	background-color: transparent;
	border: 1px solid var(--primary-color);
	border-radius: 0.45rem;
	color: var(--primary-color);
	cursor: pointer;
	font-family: monospace;
	font-size: 0.9rem;
	padding: 0.6rem 0.9rem;
}

.bring-actions > button:hover,
.bring-actions > button:focus-visible {
	background-color: rgba(116, 92, 151, 0.14);
	outline: none;
}

.bring-actions > button[disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

.bring-citations {
	counter-reset: bring-citation;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bring-citations > li {
	counter-increment: bring-citation;
}

.bring-citations > li::before {
	content: "[" counter(bring-citation) "] ";
}

.bring-citation-link {
	color: var(--primary-color);
	text-decoration: underline;
}

.bring-citation-link:hover,
.bring-citation-link:focus-visible {
	color: #8f79b2;
	outline: none;
}

@media (min-resolution: 2dppx) {
	.bring-page {
		gap: 2rem;
		padding: 2rem 1.25rem 3rem;
		width: min(44rem, calc(100vw - 2.5rem));
	}

	.bring-nav-link {
		font-size: 1.5rem;
		top: 1.25rem;
	}

	.bring-nav-left {
		left: 1.25rem;
	}

	.bring-nav-right {
		right: 1.25rem;
	}

	.bring-field > span,
	.bring-form > h2,
	.bring-results > h2,
	.bring-field > input,
	.bring-step-button,
	.bring-actions > button {
		font-size: 1.5rem;
	}
}