/* Origami Studio dialog. */

.wpieog {
	width: min( 1460px, 97vw );
}

.wpieog-body {
	display: grid;
	grid-template-columns: 280px 1fr 300px;
	gap: 14px;
	min-height: 620px;
}

.wpieog-left,
.wpieog-side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
	max-height: 74vh;
	padding-right: 2px;
}

.wpieog-view {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.wpieog-canvas {
	width: 100%;
	flex: 1;
	min-height: 460px;
	border-radius: 12px;
	background: radial-gradient( 120% 90% at 50% 12%, #3a4150, #191d24 72% );
	touch-action: none;
	cursor: grab;
}

.wpieog-canvas:active {
	cursor: grabbing;
}

.wpieog-hint {
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 11px;
	opacity: 0.65;
	pointer-events: none;
}

.wpieog-views {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wpieog-views .ai-btn {
	padding: 4px 10px;
	font-size: 12px;
}

.wpieog-bar {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wpieog-progress {
	flex: 1;
}

.wpieog-steplabel {
	min-width: 120px;
	text-align: right;
	font-size: 12px;
	opacity: 0.85;
}

/* Figure cards. */

.wpieog-figures {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 8px;
}

.wpieog-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 6px;
	border-radius: 10px;
	border: 1px solid var( --wpie-border, #3a3f4a );
	background: var( --wpie-panel, #23262e );
	color: inherit;
	cursor: pointer;
	font-size: 12px;
}

.wpieog-figure:hover {
	border-color: var( --wpie-accent, #3b66ff );
}

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

.wpieog-figthumb {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	background: #f4efe6;
}

/* Paper designer. */

.wpieog-sidebox {
	border: 1px solid var( --wpie-border, #3a3f4a );
	border-radius: 10px;
	padding: 8px 10px;
	margin-bottom: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wpieog-sidehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	font-size: 13px;
}

.wpieog-paperview {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 1px solid rgba( 255, 255, 255, 0.15 );
}

.wpieog-btnrow {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.wpieog-btnrow .ai-btn {
	padding: 4px 9px;
	font-size: 12px;
}

/* Instruction list. */

.wpieog-steps {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wpieog-step {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border-radius: 10px;
	border: 1px solid var( --wpie-border, #3a3f4a );
	background: var( --wpie-panel, #23262e );
	color: inherit;
	cursor: pointer;
	text-align: left;
	font-size: 12px;
	line-height: 1.35;
}

.wpieog-step:hover {
	border-color: var( --wpie-accent, #3b66ff );
}

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

.wpieog-stepthumb {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: 6px;
	background: #f4efe6;
}

.wpieog-steptext {
	flex: 1;
}

.wpieog-status {
	flex: 1;
	font-size: 12px;
	opacity: 0.8;
	align-self: center;
}

.wpieog-status.is-bad {
	color: #ff7a76;
	opacity: 1;
}

@media ( max-width: 1100px ) {
	.wpieog-body {
		grid-template-columns: 1fr;
	}
}

/* The side column is a flex column with its own scroll area. Without
   this the cards keep the default flex-shrink and get SQUEEZED instead
   of overflowing, so overflow-y never triggers and the panel simply has
   no scrollbar - the content below the fold becomes unreachable.
   (Bug class from 2026-07-17, fixed in five studios then; swept across
   the family on 2026-08-01.) */
#wpie-root .wpieog-side > * {
	flex-shrink: 0;
}