/* Mystic Studio: only the column layout and the studio-specific bits live
   here; all chrome and controls style themselves through dsm. */

#wpie-root .wpiemys-dialog {
	width: min( 1180px, 97vw );
}

#wpie-root .wpiemys-body {
	display: flex;
	gap: 12px;
	/* Fixed like the other studios (Solar System pattern): the side rail
	   scrolls inside, the modal never grows with the card's section count. */
	height: min( 680px, 76vh );
	min-height: 0;
}

#wpie-root .wpiemys-left {
	flex: 0 0 190px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: auto;
}

/* Both columns are flex containers with overflow:auto, and their cards keep
   the default flex-shrink of 1. That combination does not scroll: when the
   content is taller than the panel the cards get SQUEEZED instead of
   overflowing, so overflow:auto never has anything to scroll and the
   scrollbar never appears. Mystic has more panel content than most (chart,
   moon, zodiac, Chinese, numerology, couples, look), so it hits this on an
   ordinary screen.

   Same family bug that was swept out of thirteen studios on 1 August; this
   one was built on the 6th and missed it. Same fix as wpiets-side and
   wpieog-side carry. */
#wpie-root .wpiemys-left > *,
#wpie-root .wpiemys-side > * {
	flex: none;
	min-width: 0;
}

#wpie-root .wpiemys-view {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --ed-canvas, #14161c );
	border: 1px solid var( --ed-border, #2a2e39 );
	border-radius: 10px;
	overflow: hidden;
	min-width: 380px;
}

#wpie-root .wpiemys-view canvas {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

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

#wpie-root .wpiemys-doc {
	position: absolute;
	top: 10px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	font-size: 11px;
	border-radius: 20px;
	background: var( --ed-panel, #1b1e27 );
	border: 1px solid var( --ed-border, #2a2e39 );
	color: var( --ed-text, #dfe3ec );
	cursor: pointer;
}

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

#wpie-root .wpiemys-side {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: auto;
	max-height: 100%;
}

#wpie-root .wpiemys-left .dsm-card-head,
#wpie-root .wpiemys-side .dsm-card-head {
	color: var( --ed-text-dim, #b9c0cc );
}

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

/* Card rail. */
#wpie-root .wpiemys-card {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 9px 10px;
	margin-bottom: 6px;
	border-radius: 8px;
	border: 1px solid var( --ed-border, #2a2e39 );
	background: var( --ed-panel, #1b1e27 );
	color: var( --ed-text, #dfe3ec );
	font-size: 12px;
	cursor: pointer;
	text-align: left;
}

#wpie-root .wpiemys-card[aria-pressed='true'] {
	border-color: var( --accent, #3b66ff );
	background: color-mix( in srgb, var( --accent, #3b66ff ) 12%, transparent );
}

#wpie-root .wpiemys-card svg {
	flex: 0 0 auto;
	opacity: 0.9;
}

/* Place search. */
#wpie-root .wpiemys-search {
	position: relative;
	margin-bottom: 8px;
}

#wpie-root .wpiemys-search .dsm-input {
	width: 100%;
	background: var( --surface-input );
	color: var( --text-primary );
}

#wpie-root .wpiemys-hits {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
}

#wpie-root .wpiemys-hit {
	padding: 6px 9px;
	border-radius: 6px;
	border: 1px solid var( --ed-border, #2a2e39 );
	background: var( --ed-panel, #1b1e27 );
	color: var( --ed-text, #dfe3ec );
	font-size: 12px;
	text-align: left;
	cursor: pointer;
}

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

#wpie-root .wpiemys-hit.is-empty {
	cursor: default;
	color: var( --text-muted, #8a90a0 );
	border-style: dashed;
}

#wpie-root .wpiemys-offin {
	width: 74px;
	margin-left: 6px;
	background: var( --surface-input );
	color: var( --text-primary );
}

#wpie-root .wpiemys-font {
	min-width: 150px;
}

#wpie-root .wpiemys-status {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}