/* Where a surface would land. Covers the whole screen while it is up, so the crosshair
   cannot brace things underneath that are not being asked about; the element carries
   `data-mf-no-brace` so it braces nothing itself either. */
.mf-zone-map {
	position: fixed;
	inset: 0;
	z-index: 200;

	/* Carrying a window, the drop is answered by where the pointer is, so the map has
	   nothing to intercept — and one that outlived its gesture would be a screen-sized
	   hole every later click falls into. Only a pick is a target. */
	&[data-mf-mode="drag"] {
		pointer-events: none;
	}
}

/* The arrangement a drop would leave, drawn over the view area. */
.mf-zone-preview {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.mf-zone-pane {
	fill: var(--mf-color-surface);
	fill-opacity: 0.94;
	stroke: var(--mf-color-border-strong);
	stroke-width: var(--mf-border-width);
	stroke-dasharray: 4 3;

	/* The one arriving: solid, lit, and the only thing the eye has to find. */
	&[data-mf-added] {
		fill: color-mix(in srgb, var(--mf-color-accent) 22%, var(--mf-color-surface));
		stroke: var(--mf-color-accent);
		stroke-dasharray: none;
	}
}

.mf-zone-name {
	fill: var(--mf-color-text-muted);
	font-family: inherit;
	font-size: var(--mf-font-size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;

	&[data-mf-added] {
		fill: var(--mf-color-accent);
	}
}

/* A zone is a hit area and nothing else; what it means is drawn in the preview. */
.mf-zone {
	position: fixed;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: transparent;
	font: inherit;
	pointer-events: auto;

	&:focus-visible {
		outline: none;
	}
}