/**
 * City Diorama - only the three-column shell, the stage and the two grids.
 * Everything else is dsm: cards, rows, sliders, buttons and inputs style
 * themselves, which is what keeps every studio looking like one product.
 */

/*
 * The dialog carries its own size. `.modal-backdrop` is a grid with
 * place-items:center, which means the box is sized to its content and the
 * width passed to ui.dialog() is only a ceiling - set one without the
 * other and the dialog stays exactly as wide as the three columns happen
 * to add up to.
 */
#wpie-root .wpiecd-dialog {
	display: flex;
	flex-direction: column;
	width: min( 1560px, 97vw );
	height: min( 880px, 92vh );
}

#wpie-root .wpiecd-body {
	display: flex;
	flex: 1;
	gap: 14px;
	align-items: stretch;
	min-height: 0;
}

/*
 * The columns space their cards, not the cards themselves: .dsm-card
 * carries padding and no margin, so stacked sections butt straight into
 * each other unless the column is a flex column with a gap. Same as
 * 3D Gallery Studio.
 */
#wpie-root .wpiecd-left {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 208px;
	flex: 0 0 208px;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 100%;
	padding-bottom: 4px;
}

#wpie-root .wpiecd-side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 292px;
	flex: 0 0 292px;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 100%;
	padding-bottom: 4px;
}

#wpie-root .wpiecd-view {
	position: relative;
	flex: 1 1 auto;
	min-width: 420px;
	border-radius: 10px;
	overflow: hidden;
	background:
		linear-gradient( 45deg, rgba( 255, 255, 255, 0.045 ) 25%, transparent 25% ) -8px 0 / 16px 16px,
		linear-gradient( -45deg, rgba( 255, 255, 255, 0.045 ) 25%, transparent 25% ) -8px 0 / 16px 16px,
		linear-gradient( 45deg, transparent 75%, rgba( 255, 255, 255, 0.045 ) 75% ) -8px 0 / 16px 16px,
		linear-gradient( -45deg, transparent 75%, rgba( 255, 255, 255, 0.045 ) 75% ) -8px 0 / 16px 16px,
		var( --ed-panel, #14161c );
}

#wpie-root .wpiecd-view.is-doc {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#wpie-root .wpiecd-view.is-picking {
	cursor: crosshair;
}

#wpie-root .wpiecd-canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
}

/* Section heads read like the other 3D studios. */
#wpie-root .wpiecd-left .dsm-card-head,
#wpie-root .wpiecd-side .dsm-card-head {
	color: var( --ed-text-dim, #b9c0cc );
}

#wpie-root .wpiecd-left .dsm-card-head svg,
#wpie-root .wpiecd-side .dsm-card-head svg {
	opacity: 0.85;
}

/* Orbit hint: centred pill at the bottom. */
#wpie-root .wpiecd-hint {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX( -50% );
	padding: 4px 11px;
	border-radius: 20px;
	background: rgba( 10, 12, 16, 0.55 );
	font-size: 10px;
	color: rgba( 255, 255, 255, 0.82 );
	pointer-events: none;
}

/* The attribution OpenStreetMap's licence asks for, always visible. */
#wpie-root .wpiecd-credit {
	position: absolute;
	left: 10px;
	bottom: 10px;
	font-size: 9px;
	color: rgba( 255, 255, 255, 0.5 );
	pointer-events: none;
}

#wpie-root .wpiecd-docbtn {
	position: absolute;
	top: 10px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	border-radius: 20px;
	border: 1px solid var( --ed-border, #2a2f3a );
	background: var( --ed-panel, #14161c );
	color: inherit;
	font-size: 11px;
	cursor: pointer;
}

#wpie-root .wpiecd-docbtn[ aria-pressed='true' ] {
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpiecd-busy {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba( 10, 12, 16, 0.55 );
	color: rgba( 255, 255, 255, 0.9 );
	font-size: 12px;
	z-index: 2;
}

#wpie-root .wpiecd-busy.on {
	display: flex;
}

/* Places and looks: two columns of small cards. */
#wpie-root .wpiecd-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}

#wpie-root .wpiecd-place,
#wpie-root .wpiecd-look {
	display: block;
	width: 100%;
	padding: 7px 9px;
	border-radius: 7px;
	border: 1px solid var( --ed-border, #2a2f3a );
	background: var( --ed-panel, #14161c );
	color: inherit;
	font-size: 11.5px;
	text-align: left;
	cursor: pointer;
}

#wpie-root .wpiecd-place:hover,
#wpie-root .wpiecd-look:hover {
	border-color: var( --ed-text-dim, #b9c0cc );
}

#wpie-root .wpiecd-look[ aria-pressed='true' ] {
	border-color: var( --accent, #3b66ff );
	box-shadow: inset 0 0 0 1px var( --accent, #3b66ff );
}

/* Place search. */
#wpie-root .wpiecd-search {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
}

#wpie-root .wpiecd-search .dsm-input {
	flex: 1 1 auto;
	min-width: 0;
}

#wpie-root .wpiecd-results {
	display: grid;
	gap: 4px;
	margin-bottom: 8px;
}

#wpie-root .wpiecd-result {
	display: block;
	width: 100%;
	padding: 5px 8px;
	border-radius: 6px;
	border: 1px solid transparent;
	background: var( --ed-panel, #14161c );
	color: inherit;
	text-align: left;
	cursor: pointer;
}

#wpie-root .wpiecd-result:hover {
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpiecd-result strong {
	display: block;
	font-size: 12px;
	font-weight: 600;
}

#wpie-root .wpiecd-result small {
	display: block;
	font-size: 10.5px;
	color: var( --text-muted, #8b93a1 );
}

/* Labels ride over the stage, and never eat a click meant for the city. */
#wpie-root .wpiecd-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* The locator map: square, full width of the panel. */
#wpie-root .wpiecd-locator {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	border: 1px solid var( --ed-border, #2a2f3a );
	cursor: grab;
	touch-action: none;
}

#wpie-root .wpiecd-locator:active {
	cursor: grabbing;
}

#wpie-root .wpiecd-lochint {
	margin-top: 2px;
}

/* Marker rows: number, label field, remove. */
#wpie-root .wpiecd-markers {
	display: grid;
	gap: 4px;
}

#wpie-root .wpiecd-mrow {
	display: flex;
	align-items: center;
	gap: 6px;
}

#wpie-root .wpiecd-mnum {
	flex: 0 0 18px;
	font-size: 11px;
	text-align: center;
	color: var( --text-muted, #8b93a1 );
}

#wpie-root .wpiecd-mrow .dsm-input {
	flex: 1 1 auto;
	min-width: 0;
}

#wpie-root .wpiecd-mdel {
	flex: 0 0 22px;
	height: 22px;
	border-radius: 6px;
	border: 1px solid var( --ed-border, #2a2f3a );
	background: var( --ed-panel, #14161c );
	color: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

#wpie-root .wpiecd-mdel:hover {
	border-color: var( --red-500, #ef4444 );
	color: var( --red-500, #ef4444 );
}

#wpie-root .wpiecd-swatch {
	display: inline-flex;
}

/* Footer status: never wider than the room it has. */
#wpie-root .wpiecd-status {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}