@layer components {
	@scope (.survey-editor) {
		:scope {
			display: grid;
		}

		.editor-body {
			display: grid;
			grid-template-columns: 20rem minmax(0, 1fr);
			gap: var(--space-4);
			align-items: start;
		}

		.editor-sidebar {
			display: grid;
			gap: var(--space-4);
			position: sticky;
			inset-block-start: 4rem;
		}

		.sidebar-section {
			background-color: var(--color-surface);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			padding: var(--space-4);
			display: grid;
			gap: var(--space-3);
		}

		.sidebar-section h2 {
			font-size: 0.85rem;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: var(--color-muted);
		}
	}

	@scope (.catalog-search) {
		:scope {
			input {
				inline-size: 100%;
			}
		}
	}

	@scope (.catalog-list) {
		:scope {
			display: grid;
			gap: var(--space-1);
			max-block-size: 24rem;
			overflow-y: auto;
			overscroll-behavior: contain;
			padding-block-end: var(--space-1);
		}

		.catalog-item {
			display: grid;
			gap: 0.1rem;
			text-align: start;
			border: 1px solid var(--color-border);
			border-radius: var(--radius);
			padding: var(--space-2) var(--space-3);
			background-color: var(--color-surface);
		}

		.catalog-item:hover {
			border-color: var(--color-text);
		}

		.catalog-item.is-armed {
			border-color: var(--color-accent);
			background-color: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface));
		}

		.catalog-model {
			font-weight: 600;
			font-size: 0.92rem;
		}

		.catalog-meta {
			color: var(--color-muted);
			font-size: 0.78rem;
		}

		.catalog-generic {
			border-style: dashed;
		}
	}

	@scope (.editor-tabs) {
		:scope {
			display: flex;
			gap: var(--space-1);
			border-block-end: 1px solid var(--color-border);
			margin-block-end: var(--space-4);
		}

		.editor-tab {
			padding: var(--space-2) var(--space-4);
			border-radius: var(--radius) var(--radius) 0 0;
			font-weight: 600;
			color: var(--color-muted);
		}

		.editor-tab:hover {
			color: var(--color-text);
			background-color: var(--color-surface-muted);
		}

		.editor-tab.is-active {
			color: var(--color-text);
			border-block-end: 2px solid var(--color-accent);
			margin-block-end: -1px;
		}
	}

	@scope (.editor-stage) {
		:scope {
			display: grid;
			gap: var(--space-4);
			position: relative;
		}

		.canvas-pane {
			display: grid;
			gap: var(--space-2);
		}

		.map-canvas, .floor-canvas-wrap {
			min-block-size: 28rem;
			block-size: 62vh;
			background-color: var(--color-surface);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			overflow: hidden;
		}

		.map-canvas {
			position: relative;
		}

		.floor-canvas-wrap {
			position: relative;
			overflow: auto;
			block-size: auto;
			min-block-size: 24rem;
		}

		.floor-canvas {
			position: relative;
			display: block;
		}

		.floor-canvas img {
			max-inline-size: 100%;
			height: auto;
		}

		.floor-svg {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
		}

		.toolbar-hint {
			color: var(--color-muted);
			font-size: 0.85rem;
		}
	}

	@scope (.streetview-pane) {
		:scope {
			position: absolute;
			inset-block: 0;
			inset-inline-end: 0;
			inline-size: min(28rem, 100%);
			z-index: 10;
			display: grid;
			grid-template-rows: auto 1fr;
			gap: var(--space-2);
			padding: var(--space-4);
			background-color: var(--color-surface-muted);
			border-inline-start: 1px solid var(--color-border);
			box-shadow: var(--shadow-md);
			overflow: auto;
			outline: none;
		}

		.sv-toolbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: var(--color-muted);
			font-size: 0.85rem;
		}

		.sv-canvas {
			min-block-size: 220px;
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			overflow: hidden;
		}

		.sv-empty {
			border: 1px dashed var(--color-border);
			border-radius: var(--radius-lg);
			padding: var(--space-4);
			color: var(--color-muted);
			text-align: center;
		}
	}

	@scope (.banner) {
		:scope {
			padding: var(--space-3) var(--space-4);
			border-radius: var(--radius);
			border: 1px solid var(--color-border);
			background-color: var(--color-surface);
			margin-block-end: var(--space-4);
		}

		.button {
			margin-inline-start: var(--space-2);
		}
	}

	@scope (.inspector) {
		:scope {
			display: grid;
			gap: var(--space-3);
		}

		.inspector-model {
			font-weight: 600;
			font-size: 0.95rem;
		}

		.inspector-empty {
			color: var(--color-muted);
			font-size: 0.9rem;
		}
	}

	@scope (.color-swatches) {
		:scope {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-2);
		}

		.swatch {
			display: grid;
			place-items: center;
			inline-size: 2rem;
			block-size: 2rem;
			border-radius: 999px;
			background-color: var(--swatch-color);
			border: 2px solid transparent;
			cursor: pointer;
		}

		.swatch:has(input:checked) {
			border-color: var(--color-text);
		}

		.swatch:focus-within {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}

		.swatch input {
			opacity: 0;
			inline-size: 0;
			block-size: 0;
		}
	}

	@scope (.no-key-grid) {
		:scope {
			display: grid;
			place-items: center;
			min-block-size: 28rem;
			block-size: 62vh;
			color: var(--color-muted);
		}

		.no-key-svg {
			position: absolute;
			inset: 0;
			inline-size: 100%;
			block-size: 100%;
		}
	}

	@scope (.export-dialog) {
		:scope {
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			padding: var(--space-6);
			max-inline-size: 30rem;
			inline-size: 100%;
		}

		:scope::backdrop {
			background-color: oklch(20% 0.02 250 / 50%);
		}
	}

	.cone-wrap {
		position: absolute;
	}
}