.modal-bg .modal-container {
	& input, & select {
		padding: 0.25em;
		height: min-content;
		outline: none;
		border: groove 3px var(--primary);
		background: var(--harmony-primary);
	}

	& input {
		&[type=text], &[type=number], &[type=password] {
			width: 5em;
		}
		-moz-appearance: textfield;
		&[type=number]::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	.modal-theme {
		display: flex;
		flex-flow: row nowrap;
		justify-items: center;
		align-items: center;
		align-content: center;

		& .input-zone {
			display: grid;
			grid-template-columns: auto 3em;

			&>span:nth-child(3n + 1) {
				grid-column: span 2;
			}
		}
	}

	ul.proj-examples {
		margin: 0;
		padding: 0;
		list-style: none;

		& li {
			display: inline;

			&:not(:last-child)::after {
				content: ', ';
			}
		}
	}

	.proj-input {
		display: flex;
		flex-flow: row nowrap;
		background: var(--harmony-primary);
		border-radius: 0.125em;
		border: inset 2px var(--secondary);
		outline: solid 1px var(--tertiary);

		&:has(input:focus) {
			border-color: var(--harmony-primary);
			outline-color: var(--harmony-secondary);
		}

		& input, & button {
			background: none;
			display: block;
			margin: 0;
			outline: none;
			border: none;
			height: 32px;
			padding: 0;
		}

		& input {
			flex-grow: 1;
			align-self: center;
			padding-left: 0.25em;
		}

		& button {
			width: 32px;
			fill: var(--primary);
			stroke: var(--primary);
			color: var(--primary);
			font-size: 1.5em;
			font-weight: bold;
			cursor: pointer;

			&:hover {
				filter: brightness(115%);
			}
		}

		&[data-match=true] .import {
			display: none;
		}
	}

	.proj-desc {
		--deg: 0deg;
		text-align: center;
		margin-top: 0.25em;
		font-weight: bold;
		color: hsl(var(--deg) 70% 35%);
		text-shadow:
			+1px +1px 3px hsl(var(--deg), 80%, 80%),
			+1px -1px 3px hsl(var(--deg), 80%, 80%),
			-1px +1px 3px hsl(var(--deg), 80%, 80%),
			-1px -1px 3px hsl(var(--deg), 80%, 80%);
		&[data-format=exists] { --deg: 110deg; }
		&[data-format=available] { --deg: 215deg; }
		&[data-format=queryable] { --deg: 47deg; }
	}

	.layer-edit {
		&:not(:has(.source select:empty)) .workspace,
		&:not(:has(.source select:empty)) .layer,
		.source:has(select:empty) { display: none; }

		&, & label {
			display: flex;
			flex-flow: column nowrap;
			align-items: stretch;
			text-align: center;
		}

		& input, & select {
			border-color: var(--secondary);
		}

		& label {
			margin-top: 1em;

			& input, & button, & span {
				display: block;
				width: auto;
			}

			& input, & button {
				background: var(--harmony-primary);
				color: var(--contrast);
				padding: 0.5em 0.25em;
			}
			
			& span:has(+input,+button) {
				margin: 0 0 0.25em 0;
			}
		}
	}

	.extent-box {
		.extent-preview {
			position: relative;
			margin: 0.75em auto;
			border: none;
			padding: 0;
			width: 240px;
			height: 120px;
			outline: groove 3px var(--secondary);
			overflow: hidden;
			user-select: none;

			.preview {
				--scale: 1;
				width: calc(100% * var(--scale));
				height: calc(100% * var(--scale));
				transform: scale(calc(1 / var(--scale)));
				transform-origin: 0 0;
			}

			.projection, .uninversivity {
				position: absolute;
				background: rgba(255 255 255 / 75%);
				padding: 0.125em;
				font-size: 0.75em;
				font-weight: bold;
				font-family: sans-serif;
			}

			.projection {
				left: 0;
				bottom: 0;
			}

			.uninversivity {
				top: 0;
				right: 0;
			}

			&:not(:hover) .projection {
				opacity: 0.5;
				& input {
					display: none;
				}
			}
		}

		&:not(:has(.wgs84>input:checked)) .projection {
			display: none;
		}

		.extent-form {
			display: grid;
			grid-template-areas: "north north north" "west mid east" "south south south";
			grid-template-rows: 1fr min-content 1fr;
			grid-template-columns: repeat(3, min-content);
			align-items: center;
			justify-content: center;

			.north { grid-area: north; }
			.south { grid-area: south; }
			.west { grid-area: west; }
			.east { grid-area: east; }

			&>.north {
				margin: 0 auto 4px auto;
				text-align: center;
			}
			&>.south {
				margin: 4px auto 0 auto;
				text-align: center;
			}
			&>.west {
				margin: 0 4px 0 0;
				text-align: right;
			}
			&>.east {
				margin: 0 0 0 4px;
				text-align: left;
			}

			&:not(:has(.wgs84 > input:checked)) input[type="number"] {
				width: 9em;
			}

			.mid {
				position: relative;
				--size: 6em;
				--scale: 0.705;
				overflow: hidden;
				width: var(--size);
				height: var(--size);
				grid-area: mid;
				display: flex;
				justify-items: center;
				align-items: center;

				.diamond {
					background: var(--secondary);
					background: radial-gradient(var(--primary) -75%, var(--tertiary) 125%);
					color: var(--harmony-primary);
					border: groove 3px var(--contrast);
					width: 100%;
					height: 100%;
					transform: rotate(45deg) scale(var(--scale));
					transform-origin: 50% 50%;
					display: grid;
					grid-template-columns: 1fr 1fr;
					grid-template-rows: 1fr 1fr;
					grid-template-areas: "north east" "west south";
					&>* {
						display: grid;
						justify-items: center;
						align-items: center;
						&::after {
							transform-origin: 50% 50%;
							transform: rotate(-45deg) scale(calc(1 / var(--scale)));
						}
					}
					.north::after { content: 'S'; }
					.south::after { content: 'J'; }
					.west::after { content: 'Z'; }
					.east::after { content: 'V'; }
				}

				.wgs84 {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					font-weight: 700;
					font-size: 0.85em;
					text-shadow: 0 0 3px var(--contrast);
					text-align: center;
					font-variant: all-small-caps;
					line-height: 0.85em;

					&>input {
						display: none;
					}

					&>span {
						cursor: pointer;
						color: hsl(45deg 100% 50%);
						&:hover {
							filter: brightness(150%);
						}
					}
					
					&:not(:has(input:checked))>span {
						/*color: hsl(0deg 100% 60%);*/
						text-decoration: line-through;
						text-decoration-thickness: 2px;
						text-decoration-color: hsl(0deg 100% 60%);
					}
				}

			}
		}

		.extent-form:has(input.west:hover, input.west:focus) .mid .west,
		.extent-form:has(input.south:hover, input.south:focus) .mid .south,
		.extent-form:has(input.east:hover, input.east:focus) .mid .east,
		.extent-form:has(input.north:hover, input.north:focus) .mid .north {
			background: radial-gradient(var(--harmony-primary) -50%, transparent 105%);
			color: var(--contrast);
		}
	}

	.location-box {
		.location-preview {
			display: grid;
			grid-template-areas: "map map" "label zoom";
			width: max-content;
			margin: auto;

			.preview {
				grid-area: map;
				position: relative;
				margin: 0.5em auto;
				border: none;
				padding: 0;
				width: 240px;
				height: 120px;
				outline: groove 3px var(--secondary);
				overflow: hidden;
				user-select: none;
				.map {
					width: 100%;
					height: 100%;
				}
				.projection {
					position: absolute;
					left: 0;
					bottom: 0;
					background: rgba(255 255 255 / 75%);
					padding: 0.125em;
					font-size: 0.75em;
					font-weight: bold;
					font-family: sans-serif;
				}

				&:not(:hover) .projection {
					opacity: 0.5;
					& input {
						display: none;
					}
				}
			}
			.zoom { grid-area: label; }
			.zoom-icon { grid-area: zoom; }
		}

		.location-form {
			display: grid;
			grid-template-columns: auto auto;
			&>:nth-child(2n - 1) {
				text-align: right;
				margin-right: 0.25em;
			}
		}
	}

	.zoom-modal {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;

		.zoom-input {
			display: grid;
			grid-template-columns: auto 3em;
			grid-template-rows: 1fr 1fr;
			&>span {
				grid-column: 1 / span2;
				text-align: center;
			}
			&>input[type=number] {
				width: 3em;
			}
		}
	}

	.resolution-modal .alt {
		text-align: center;
		font-weight: 600;
		font-style: oblique;
	}

	.map-detail-modal {
		display: flex;
		flex-flow: column;
		box-sizing: border-box;

		* { box-sizing: border-box; }
		&>* { display: flex; flex-flow: column; }
		select option[value=""], select:empty { display: none; }
		textarea { resize: none; }
		input, textarea { width: 100%; }
	}

	.modal-filter-rule {
		& select option[value=""],
		.cql:has(input[disabled], button[disabled]),
		& span:has(+.cql input[disabled], +.cql button[disabled]) {
			display: none;
		}

		.cql {
			display: grid;
			outline: none;
			border: groove 3px var(--primary);
			background: var(--harmony-primary);
			grid-template-columns: auto min-content;

			& button {
				padding: 0 0.25em;
				font-weight: 600;
				color: var(--contrast);
				&:hover {
					font-weight: 700;
					color: var(--tertiary);
				}
			}

			& input, & button {
				background: transparent;
				border: none;
			}
		}
	}

	.modal-form:has(.search-modal) {
		overflow-y: visible;
	}

	.modal-query input {
		width: calc(100% - 0.5em - 6px);
	}

	.modal-form-grid {
		display: grid;
		grid-template-columns: 5fr 6fr;
		align-items: center;
		gap: 0.25em 0.5em;

		& > *:nth-child(2n - 1) {
			justify-self: flex-end;
			text-align: right;

			&::after {
				content: ':';
			}
		}

		& input {
			width: auto !important;
		}
	}
}