/*
 * Showcase Studio panel (V2, three-zone studio shell). The dialog chrome,
 * cards, rows, selects, sliders, checks and buttons all come from the
 * shared dsm classes (bridge.ui); this lays out the rail / stage /
 * controls columns and the layout mini-cards.
 */

/*
 * The editor styles `#wpie-root .dsm-body` (column flex) and gives .dsm a
 * base width; both would silently defeat plain class selectors, so the
 * two shell rules match that specificity (the Diagram Studio sizing
 * pattern, scoped even harder).
 */
#wpie-root .dsm.wpie-ss-dialog {
	width: min( 1360px, 97vw );
	height: min( 880px, 95vh );
}

#wpie-root .dsm-body.wpie-ss-body {
	display: grid;
	grid-template-columns: 200px minmax( 0, 1fr ) 320px;
	gap: 16px;
	align-items: stretch;
	flex: 1;
	min-height: 0;
}

/* ------------------------------ layout rail ------------------------------ */

.wpie-ss-rail {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	overflow-y: auto;
	padding-right: 4px;
}

/*
 * Layout cards: the mini preview IS the card — no caption, no padding,
 * quiet 1px selection ring instead of a heavy border + tint. The name
 * lives in the button's tooltip.
 */
.wpie-ss-lyt {
	appearance: none;
	display: block;
	padding: 0;
	border: 1px solid var( --ed-border, #e3e6ea );
	background: var( --ed-panel, #f4f5f7 );
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.wpie-ss-lyt:hover {
	border-color: color-mix( in srgb, var( --ed-accent, #3b66ff ) 55%, transparent );
	transform: translateY( -1px );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.14 );
}

.wpie-ss-lyt.is-on {
	border-color: var( --ed-accent, #3b66ff );
	box-shadow: 0 0 0 1px var( --ed-accent, #3b66ff );
}

.wpie-ss-lyt-canvas {
	width: 100%;
	height: auto;
	display: block;
	min-height: 60px;
}

/* ---------------------------- entry picker ------------------------------- */

.wpie-ss-picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.wpie-ss-pickresults {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 180px;
	overflow-y: auto;
}

.wpie-ss-pickitem {
	appearance: none;
	padding: 6px 9px;
	font-size: 12px;
	text-align: left;
	color: var( --ed-text, #14181f );
	background: var( --ed-panel-alt, #f4f5f7 );
	border: 1px solid transparent;
	border-radius: 7px;
	cursor: pointer;
}

.wpie-ss-pickitem:hover {
	border-color: var( --ed-accent, #3b66ff );
}

.wpie-ss-pickchips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wpie-ss-chip {
	appearance: none;
	padding: 4px 9px;
	font-size: 11.5px;
	font-weight: 600;
	color: var( --ed-accent, #3b66ff );
	background: color-mix( in srgb, var( --ed-accent, #3b66ff ) 12%, transparent );
	border: 1px solid color-mix( in srgb, var( --ed-accent, #3b66ff ) 40%, transparent );
	border-radius: 999px;
	cursor: pointer;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------- stage --------------------------------- */

.wpie-ss-stagecol {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.wpie-ss-preview {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	background: repeating-conic-gradient( #eef0f3 0% 25%, #f7f8fa 0% 50% ) 50% / 22px 22px;
	border: 1px solid var( --ed-border, #e3e6ea );
	border-radius: 10px;
	overflow: hidden;
}

/* The editor stamps data-theme on #wpie-root, not on :root. */
#wpie-root[data-theme='dark'] .wpie-ss-preview {
	background: repeating-conic-gradient( #23262d 0% 25%, #1b1e24 0% 50% ) 50% / 22px 22px;
	border-color: #2c313c;
}

.wpie-ss-canvas {
	max-width: 96%;
	max-height: 96%;
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.18 );
	border-radius: 4px;
}

.wpie-ss-hint {
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 70%;
	color: var( --ed-text-muted, #6b7280 );
	font-size: 13px;
	line-height: 1.4;
}

/*
 * Show-document: top-right of the stage with EXACTLY the 3D Gallery
 * chrome — theme panel pill, muted label, accent ring when pressed.
 * (--ed-surface does not exist as a variable; using it fell back to
 * white and made the label unreadable on the light stage.)
 */
#wpie-root .wpie-ss-docbtn {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 4px 11px;
	font-size: 11px;
	color: var( --ed-text-muted, #9aa1ab );
	cursor: pointer;
	background: var( --ed-panel, #1d2126 );
	border: 1px solid var( --ed-border, #2a2f36 );
	border-radius: 20px;
}

#wpie-root .wpie-ss-docbtn.is-on,
#wpie-root .wpie-ss-docbtn[aria-pressed='true'] {
	color: var( --ed-text, #e8ebf0 );
	border-color: var( --accent, #3b66ff );
}

/* -------------------------------- controls ------------------------------- */

.wpie-ss-controls {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	overflow-y: auto;
	padding-right: 4px;
}

.wpie-ss-paste {
	width: 100%;
	resize: vertical;
	font-family: ui-monospace, monospace;
	font-size: 12px;
	line-height: 1.4;
}

.wpie-ss-feedhint {
	margin-top: 8px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var( --ed-text-muted, #6b7280 );
}

.wpie-ss-cardprev {
	display: block;
	width: 100%;
	max-height: 140px;
	object-fit: contain;
	margin-top: 8px;
	border: 1px solid var( --ed-border, #e3e6ea );
	border-radius: 8px;
	background: var( --ed-panel-alt, #f4f5f7 );
}

.wpie-ss-map {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.wpie-ss-reset {
	appearance: none;
	margin-left: 8px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 600;
	color: var( --ed-text-muted, #6b7280 );
	background: transparent;
	border: 1px solid var( --ed-border, #e3e6ea );
	border-radius: 6px;
	cursor: pointer;
}

.wpie-ss-reset:hover {
	color: var( --ed-accent, #3b66ff );
	border-color: var( --ed-accent, #3b66ff );
}

/* ---------------------------- element rows ------------------------------- */

.wpie-ss-els {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wpie-ss-el {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 26px;
}

/*
 * The visibility toggle is the shared dsm check row; it takes the
 * flexible slot so the size/color controls right-align. The editor
 * styles .dsm-checkrow / select.dsm-select under #wpie-root, so these
 * integration rules must match that specificity.
 */
#wpie-root .wpie-ss-el .dsm-checkrow {
	flex: 1;
	min-width: 0;
	margin: 0;
}

#wpie-root .wpie-ss-el .dsm-checkrow span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpie-ss-eldot {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: color-mix( in srgb, var( --ed-accent, #3b66ff ) 30%, transparent );
	box-shadow: inset 0 0 0 4px var( --ed-surface, #fff );
	border: 1px solid var( --ed-border, #e3e6ea );
}

.wpie-ss-ellabel {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var( --ed-text, #14181f );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Compact variant of the shared dsm select (which is width:100% by
 * default) for the per-element size picker. */
#wpie-root .wpie-ss-el select.dsm-select.wpie-ss-elsize {
	flex: 0 0 auto;
	width: 58px;
	min-height: 26px;
	height: 26px;
	font-size: 11.5px;
}

.wpie-ss-elcolor {
	flex: 0 0 auto;
	display: inline-flex;
}

.wpie-ss-el .wpie-ss-reset {
	margin-left: 0;
	flex: 0 0 auto;
}

.wpie-ss-airow {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.wpie-ss-airow .ai-btn,
.wpie-ss-airow .dsm-btn {
	width: 100%;
}

/* Preset select + shuffle dice share the row. */
.wpie-ss-presetrow {
	display: flex;
	align-items: center;
	gap: 8px;
}

#wpie-root .wpie-ss-presetrow select.dsm-select {
	flex: 1;
	min-width: 0;
}

.wpie-ss-shuffle {
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var( --ed-text-muted, #6b7280 );
	background: var( --ed-panel, #f4f5f7 );
	border: 1px solid var( --ed-border, #e3e6ea );
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.12s, border-color 0.12s, transform 0.12s;
}

.wpie-ss-shuffle:hover {
	color: var( --ed-accent, #3b66ff );
	border-color: var( --ed-accent, #3b66ff );
	transform: rotate( -12deg );
}