/* Particle Studio. The modal chrome (backdrop, frame, header, footer,
   buttons, selects, scrollbars) comes from the editor's own modal design
   (dsm family) - the dialog mounts inside #wpie-root exactly for that.
   Only studio-specific layout lives here, prefixed wpieps- so sibling
   studios never collide. Three columns, cards, chequerboard view: the
   same shape as the Gallery, Mockup and Flip studios. */

#wpie-root .wpieps-dialog {
	width: min( 1660px, 98vw );
	height: min( 880px, 94vh );
}

#wpie-root .wpieps-body {
	display: flex;
	flex: 1;
	min-height: 0;
}

#wpie-root .wpieps-left,
#wpie-root .wpieps-sidescroll {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
}

#wpie-root .wpieps-left {
	width: 340px;
	min-width: 340px;
	border-right: 1px solid var( --ed-border, #2a2f36 );
}

/* The settings column: a fixed icon rail on top (the table of contents),
   the sections in their own scroller below. */
#wpie-root .wpieps-side {
	display: flex;
	flex-direction: column;
	width: 330px;
	min-width: 330px;
	overflow: hidden;
	border-left: 1px solid var( --ed-border, #2a2f36 );
}

#wpie-root .wpieps-sidescroll {
	position: relative;
	flex: 1;
	min-height: 0;
}

/* Cards in a flex column must not shrink, or they clip their own content
   instead of letting the column scroll. */
#wpie-root .wpieps-left > *,
#wpie-root .wpieps-sidescroll > * {
	flex: none;
	min-width: 0;
}

#wpie-root .wpieps-nav {
	display: flex;
	flex: none;
	gap: 3px;
	padding: 8px 10px;
	border-bottom: 1px solid var( --ed-border, #2a2f36 );
}

#wpie-root .wpieps-nav button {
	display: grid;
	flex: 1;
	place-items: center;
	padding: 5px 0;
	color: var( --ed-text-dim, #8b929c );
	cursor: pointer;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 7px;
}

#wpie-root .wpieps-nav button:hover {
	color: var( --ed-text, #e8ecf1 );
	border-color: var( --ed-border, #3a3f47 );
}

#wpie-root .wpieps-nav button.is-on {
	color: var( --accent, #3b66ff );
	background: rgba( 59, 102, 255, 0.12 );
}

#wpie-root .wpieps-view {
	position: relative;
	display: grid;
	flex: 1;
	place-items: stretch;
	min-width: 0;
	overflow: hidden;
	background: repeating-conic-gradient(
			rgba( 128, 128, 128, 0.07 ) 0 25%,
			transparent 0 50%
		)
		0 0 / 22px 22px;
}

#wpie-root .wpieps-canvas {
	width: 100%;
	height: 100%;
	touch-action: none;
	outline: none;
	cursor: grab;
}

#wpie-root .wpieps-canvas:active {
	cursor: grabbing;
}

#wpie-root .wpieps-hint,
#wpie-root .wpieps-busy {
	position: absolute;
	top: 10px;
	left: 50%;
	z-index: 2;
	padding: 4px 12px;
	font-size: 11px;
	color: var( --ed-text-dim, #8b929c );
	white-space: nowrap;
	pointer-events: none;
	background: rgba( 0, 0, 0, 0.4 );
	border-radius: 999px;
	transform: translateX( -50% );
}

#wpie-root .wpieps-busy {
	top: auto;
	bottom: 16px;
	color: var( --ed-text, #e8ecf1 );
	background: rgba( 0, 0, 0, 0.62 );
}

/* ------------------------------- the cards -------------------------------- */

#wpie-root .wpieps-card {
	background: var( --ed-panel-alt, #1b1f26 );
	border: 1px solid var( --ed-border, #2a2f36 );
	border-radius: 10px;
}

#wpie-root .wpieps-cardhead {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 9px 11px 0;
	font-size: 11px;
	font-weight: 600;
	color: var( --ed-text-dim, #8b929c );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

#wpie-root .wpieps-cardbody {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 9px 11px 11px;
}

/* Sections fold on their head; the chevron shows the state. */
#wpie-root .wpieps-cardhead.is-toggle {
	cursor: pointer;
	user-select: none;
}

#wpie-root .wpieps-chev {
	display: inline-flex;
	margin-left: auto;
	opacity: 0.7;
	transition: transform 0.15s;
}

#wpie-root .wpieps-card.is-closed .wpieps-cardbody {
	display: none;
}

#wpie-root .wpieps-card.is-closed .wpieps-cardhead {
	padding-bottom: 9px;
}

#wpie-root .wpieps-card.is-closed .wpieps-chev,
#wpie-root .wpieps-famhead.is-closed .wpieps-chev {
	transform: rotate( -90deg );
}

#wpie-root .wpieps-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

#wpie-root .wpieps-label {
	flex: none;
	width: 92px;
	font-size: 11px;
	color: var( --ed-text-dim, #a7adb7 );
}

#wpie-root .wpieps-row .dsm-range {
	flex: 1;
	min-width: 0;
}

#wpie-root .wpieps-value {
	flex: none;
	min-width: 38px;
	font-size: 11px;
	color: var( --ed-text-dim, #c3c9d3 );
	text-align: right;
}

#wpie-root .wpieps-colour {
	flex: none;
	width: 34px;
	height: 24px;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 1px solid var( --ed-border, #3a3f47 );
	border-radius: 5px;
}

/* ------------------------- scenes and fabric chips ------------------------ */

#wpie-root .wpieps-scenes {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 6px;
}

#wpie-root .wpieps-scene,
#wpie-root .wpieps-chip {
	padding: 8px 6px;
	font-size: 11px;
	color: var( --ed-text-dim, #a7adb7 );
	cursor: pointer;
	background: transparent;
	border: 1px solid var( --ed-border, #3a3f47 );
	border-radius: 8px;
}

#wpie-root .wpieps-scene:hover,
#wpie-root .wpieps-chip:hover {
	color: var( --ed-text, #e8ecf1 );
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpieps-scene.is-on,
#wpie-root .wpieps-chip.is-on {
	color: var( --ed-text, #e8ecf1 );
	background: rgba( 59, 102, 255, 0.14 );
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpieps-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

#wpie-root .wpieps-chip {
	padding: 5px 9px;
	border-radius: 999px;
}

/* --------------------------------- source --------------------------------- */

#wpie-root .wpieps-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

#wpie-root .wpieps-btnrow .ai-btn {
	flex: 1 1 auto;
	min-width: 0;
}

#wpie-root .wpieps-thumb img {
	display: block;
	width: 100%;
	max-height: 130px;
	object-fit: contain;
	border: 1px solid var( --ed-border, #3a3f47 );
	border-radius: 6px;
}

#wpie-root .wpieps-note {
	font-size: 10px;
	line-height: 1.5;
	color: var( --ed-text-dim, #8b929c );
}

#wpie-root .wpieps-status {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 11px;
	color: var( --ed-text-dim, #8b929c );
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wpie-root .wpieps-status.is-bad {
	color: #ff6b6b;
}

/* The card list: foldable family groups, two-column tiles, a search field.
   The tile thumbnails are rendered LIVE with the current seed - a canned
   picture would lie about the seed; layer cards show a glyph instead. */

#wpie-root .wpieps-search {
	box-sizing: border-box;
	width: 100%;
}

#wpie-root .wpieps-famhead {
	display: flex;
	gap: 6px;
	align-items: center;
	width: 100%;
	padding: 3px 2px;
	margin: 6px 0 2px;
	font: inherit;
	font-size: 11px;
	color: var( --ed-text-dim, #a7adb7 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	background: transparent;
	border: 0;
}

#wpie-root .wpieps-famhead .wpieps-chev {
	margin-left: 0;
}

#wpie-root .wpieps-famcount {
	margin-left: auto;
	opacity: 0.55;
}

#wpie-root .wpieps-cardgrid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 6px;
}

#wpie-root .wpieps-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 6px;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	background: rgba( 127, 127, 127, 0.1 );
	border: 1px solid transparent;
	border-radius: 8px;
}

/* Layer cards wear a corner mark: they always want a layer. */
#wpie-root .wpieps-tile-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	color: #fff;
	pointer-events: none;
	background: rgba( 0, 0, 0, 0.55 );
	border-radius: 5px;
}

#wpie-root .wpieps-tile-badge svg {
	width: 12px;
	height: 12px;
}

#wpie-root .wpieps-tile:hover {
	background: rgba( 127, 127, 127, 0.18 );
}

#wpie-root .wpieps-tile.is-on {
	background: rgba( 59, 102, 255, 0.16 );
	border-color: #3b66ff;
}

#wpie-root .wpieps-tile-thumb {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	color: var( --ed-text-dim, #8b929c );
	background: #0b0e16;
	border-radius: 6px;
}

#wpie-root .wpieps-tile-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#wpie-root .wpieps-tile-thumb svg {
	width: 30px;
	height: 30px;
	opacity: 0.6;
}

#wpie-root .wpieps-tile-label {
	font-size: 11px;
	line-height: 1.3;
}

/* The form picker: a grouped two-column grid with a glyph per form. */
#wpie-root .wpieps-formgrid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 5px;
}

#wpie-root .wpieps-form-sub {
	grid-column: 1 / -1;
	margin-top: 3px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.55;
}

#wpie-root .wpieps-form-btn {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 5px 7px;
	font: inherit;
	font-size: 11px;
	color: var( --ed-text-dim, #a7adb7 );
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 1px solid var( --ed-border, #3a3f47 );
	border-radius: 7px;
}

#wpie-root .wpieps-form-btn:hover {
	color: var( --ed-text, #e8ecf1 );
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpieps-form-btn.is-on {
	color: var( --ed-text, #e8ecf1 );
	background: rgba( 59, 102, 255, 0.14 );
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpieps-form-glyph {
	display: inline-flex;
	flex: none;
	opacity: 0.85;
}

#wpie-root .wpieps-form-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wpie-root .wpieps-need {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	max-width: 60%;
	padding: 10px 14px;
	border-radius: 9px;
	text-align: center;
	background: rgba( 0, 0, 0, .62 );
	color: #fff;
	font-size: 13px;
}

#wpie-root .wpieps-menu {
	position: absolute;
	z-index: 5;
	max-height: 260px;
	overflow-y: auto;
	padding: 4px;
	border-radius: 8px;
	background: var( --dsm-bg, #23262d );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .45 );
}

#wpie-root .wpieps-menu-item {
	display: block;
	width: 100%;
	padding: 6px 10px;
	text-align: left;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

#wpie-root .wpieps-menu-item:hover {
	background: rgba( 127, 127, 127, .2 );
}

#wpie-root .wpieps-seed {
	width: 92px;
}

/* --------------------------- v2: the live stage --------------------------- */

#wpie-root .wpieps-view.is-doc {
	background-color: #14171c;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#wpie-root .wpieps-docbtn {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 5px 11px;
	font-size: 11px;
	color: var( --ed-text, #e8ecf1 );
	cursor: pointer;
	background: rgba( 0, 0, 0, 0.45 );
	border: 1px solid var( --ed-border, #3a3f47 );
	border-radius: 999px;
}

#wpie-root .wpieps-docbtn[aria-pressed='true'] {
	background: rgba( 59, 102, 255, 0.35 );
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpieps-transport {
	position: absolute;
	right: 12px;
	bottom: 10px;
	left: 12px;
	z-index: 3;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 6px 10px;
	background: rgba( 0, 0, 0, 0.45 );
	border: 1px solid var( --ed-border, #3a3f47 );
	border-radius: 999px;
}

#wpie-root .wpieps-playbtn {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: var( --ed-text, #e8ecf1 );
	cursor: pointer;
	background: rgba( 127, 127, 127, 0.18 );
	border: 0;
	border-radius: 50%;
}

#wpie-root .wpieps-playbtn:hover {
	background: var( --accent, #3b66ff );
}

#wpie-root .wpieps-scrub {
	flex: 1;
	min-width: 0;
}

#wpie-root .wpieps-time {
	flex: none;
	min-width: 74px;
	font-size: 11px;
	color: var( --ed-text-dim, #c3c9d3 );
	text-align: right;
	font-variant-numeric: tabular-nums;
}

#wpie-root .wpieps-pals {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 6px;
}

#wpie-root .wpieps-pal {
	height: 22px;
	cursor: pointer;
	border: 1px solid var( --ed-border, #3a3f47 );
	border-radius: 6px;
}

#wpie-root .wpieps-pal.is-on {
	outline: 2px solid var( --accent, #3b66ff );
	outline-offset: 1px;
}

#wpie-root .wpieps-footbtns {
	display: flex;
	flex: none;
	gap: 8px;
}

#wpie-root .wpieps-spin {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	vertical-align: -2px;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: wpieps-rot 0.8s linear infinite;
}

@keyframes wpieps-rot {
	to {
		transform: rotate( 360deg );
	}
}

/* Vortex pin markers: DOM over the canvas, never in a baked still. */
#wpie-root .wpieps-pins {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

#wpie-root .wpieps-pin {
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background: rgba( 59, 102, 255, 0.35 );
	border: 2px solid rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	box-shadow: 0 0 10px rgba( 0, 0, 0, 0.55 );
	animation: wpieps-pinpulse 1.6s ease-in-out infinite;
}

#wpie-root .wpieps-pin::after {
	position: absolute;
	inset: 4px;
	content: '';
	background: #fff;
	border-radius: 50%;
	opacity: 0.85;
}

@keyframes wpieps-pinpulse {
	50% {
		box-shadow: 0 0 10px rgba( 0, 0, 0, 0.55 ), 0 0 0 6px rgba( 59, 102, 255, 0.22 );
	}
}

/* v4.0.1: text inputs stay inside the row (the seed keeps its fixed
   width next to the dice button). */
#wpie-root .wpieps-row .dsm-input:not( .wpieps-seed ) {
	flex: 1;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Breed variations: eight seed-children as clickable thumbnails. */
.wpieps-breed {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 6px;
	margin-top: 8px;
}

.wpieps-breed-thumb {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var( --ed-border, #333a46 );
	background: #0b0e16;
	cursor: pointer;
}

.wpieps-breed-thumb:hover {
	border-color: var( --accent, #4a8cff );
}

.wpieps-breedbtn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 8px;
	padding: 6px 10px;
}