/* 3D Solar System Studio - only the studio-specific layout. Dialog shell,
   sections, rows, selects, checks, buttons and colour swatches all come from
   the shared editor UI kit (bridge.ui / dsm-*). */

#wpie-root .wpie-orr-body {
	display: flex; gap: 14px; min-height: 0;
	height: min(680px, 76vh);
}
#wpie-root .wpie-orr-left,
#wpie-root .wpie-orr-side {
	width: 300px; flex: 0 0 300px; overflow-y: auto; overflow-x: hidden;
}
#wpie-root .wpie-orr-view {
	flex: 1; min-width: 0; position: relative; border-radius: 12px; overflow: hidden;
	background: radial-gradient(circle at 50% 45%, #0a1024, #03040a);
}
#wpie-root .wpie-orr-view canvas { width: 100% !important; height: 100% !important; display: block; }

/* Section-card headers: match the other 3D studios (--ed-text-dim, not the
   shared --text-muted default). */
#wpie-root .wpie-orr-left .dsm-card-head,
#wpie-root .wpie-orr-side .dsm-card-head { color: var( --ed-text-dim, #b9c0cc ); }
#wpie-root .wpie-orr-left .dsm-card-head svg,
#wpie-root .wpie-orr-side .dsm-card-head svg { opacity: 0.85; }

#wpie-root .wpie-orr-grouphead {
	margin: 10px 0 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
	text-transform: uppercase; color: var( --ed-text-muted, #9aa1ab );
}
#wpie-root .wpie-orr-grouphead:first-child { margin-top: 0; }

/* Body toggle rows: a colour dot (Saturn wears a ring), the name, an eye that
   lights up when shown. Off = dimmed. Nicer than a bare checkbox list. */
#wpie-root .wpie-orr-bodyrow {
	display: flex; align-items: center; gap: 9px; width: 100%;
	padding: 6px 8px; margin: 1px 0; border: 0; border-radius: 8px;
	background: transparent; color: var( --ed-text, #e8ebf0 );
	font: inherit; text-align: left; cursor: pointer;
	transition: background 0.12s ease, opacity 0.12s ease;
}
#wpie-root .wpie-orr-bodyrow:hover { background: var( --ed-hover, rgba( 255, 255, 255, 0.06 ) ); }
#wpie-root .wpie-orr-bodyrow[aria-pressed='false'] { opacity: 0.42; }
#wpie-root .wpie-orr-bodyname { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wpie-root .wpie-orr-dot {
	position: relative; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
	background: var( --dot, #8a94a6 );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.35 ) inset, 0 0 9px -1px var( --dot, #8a94a6 );
}
#wpie-root .wpie-orr-bodyrow.has-ring .wpie-orr-dot::after {
	content: ''; position: absolute; left: 50%; top: 50%;
	width: 23px; height: 8px; transform: translate( -50%, -50% ) rotate( -22deg );
	border-radius: 50%; border: 1.5px solid var( --dot, #e0c98f ); opacity: 0.85;
}
#wpie-root .wpie-orr-rowicon { width: 14px; height: 14px; flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; color: var( --ed-text-dim, #b9c0cc ); }
#wpie-root .wpie-orr-rowicon svg { width: 14px; height: 14px; }
#wpie-root .wpie-orr-bodyeye { flex: 0 0 auto; display: inline-flex; color: var( --ed-text-muted, #9aa1ab ); opacity: 0.6; }
#wpie-root .wpie-orr-bodyeye svg { width: 15px; height: 15px; }
#wpie-root .wpie-orr-bodyrow[aria-pressed='true'] .wpie-orr-bodyeye { color: var( --accent, #3b66ff ); opacity: 1; }
#wpie-root .wpie-orr-subrow { margin-top: 2px; }

#wpie-root .wpie-orr-today,
#wpie-root .wpie-orr-preset { width: 100%; justify-content: center; margin-top: 8px; }

#wpie-root .wpie-orr-credit {
	margin: 12px 2px 2px; font-size: 10px; line-height: 1.4;
	color: var( --ed-text-muted, #9aa1ab ); opacity: 0.75;
}

/* View overlays: orbit hint (centred pill) + Show-document (top-right pill),
   matched 1:1 to the other 3D studios. */
#wpie-root .wpie-orr-hint {
	position: absolute; bottom: 10px; left: 50%; z-index: 2;
	padding: 3px 10px; font-size: 10px; color: rgba(255, 255, 255, 0.82);
	pointer-events: none; background: rgba(10, 12, 16, 0.55); border-radius: 20px;
	transform: translateX(-50%); white-space: nowrap;
}
#wpie-root .wpie-orr-docbtn {
	position: absolute; top: 10px; right: 12px; z-index: 3;
	display: inline-flex; align-items: center; gap: 6px;
	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-orr-docbtn svg { width: 14px; height: 14px; }
#wpie-root .wpie-orr-docbtn:hover { color: var( --ed-text, #e8ebf0 ); }
#wpie-root .wpie-orr-docbtn[aria-pressed='true'] { color: var( --ed-text, #e8ebf0 ); border-color: var( --accent, #3b66ff ); }
#wpie-root .wpie-orr-view.is-doc { background-color: #05060a; background-size: contain; background-position: center; background-repeat: no-repeat; }

/* Footer status: keep the shared blue-grey .dsm-hint colour, add the ellipsis
   guard so a long date + scale line cannot push the footer around. */
#wpie-root .wpie-orr-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }