/* Papercut Art. Modal chrome comes from the editor's dsm family - only
   the studio layout lives here, scoped under #wpie-root. */

#wpie-root .wpiepca-dialog {
	display: flex;
	flex-direction: column;
	width: min( 1460px, 97vw );
	height: min( 920px, 94vh );
}

#wpie-root .wpiepca-dialog .dsm-body {
	display: flex;
	flex: 1;
	min-height: 0;
	padding: 0;
}

.wpiepca-body {
	display: flex;
	flex: 1;
	min-width: 0;
	min-height: 0;
}

/* Left: the library. */
.wpiepca-left {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 8px;
	width: 300px;
	padding: 12px;
	overflow-y: auto;
	border-right: 1px solid var( --ed-border, #333a44 );
}

.wpiepca-famhead {
	padding: 6px 2px 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --ed-text-dim, #b9c0cc );
	text-transform: uppercase;
}

.wpiepca-libgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* Scenes REPLACE the whole picture, every other tile only adds to it.
   They used to look identical and sit in the same list, so one stray
   click threw the work away. Dashed and set apart, they no longer read
   as "one more element". */
#wpie-root .wpiepca-libgrid.is-scenes {
	padding-bottom: 10px;
	margin-bottom: 4px;
	border-bottom: 1px solid var( --ed-border, #333a44 );
}

#wpie-root .wpiepca-libgrid.is-scenes .wpiepca-tile {
	border-style: dashed;
}

#wpie-root .wpiepca-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 5px;
	cursor: pointer;
	background: var( --ed-panel, #14171c );
	border: 1px solid var( --ed-border, #333a44 );
	border-radius: 9px;
}

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

.wpiepca-tile-thumb {
	aspect-ratio: 3 / 2;
	background-color: #10131a;
	background-position: center;
	background-size: cover;
	border-radius: 6px;
}

.wpiepca-tile-label {
	overflow: hidden;
	font-size: 10.5px;
	color: var( --ed-text-dim, #b9c0cc );
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Middle: the stage. */
.wpiepca-view {
	position: relative;
	display: grid;
	flex: 1;
	place-items: center;
	min-width: 0;
	overflow: hidden;
	background: #0a0c11;
}

.wpiepca-view canvas {
	max-width: calc( 100% - 36px );
	max-height: calc( 100% - 36px );
	cursor: grab;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.45 );
}

.wpiepca-view canvas:active {
	cursor: grabbing;
}

.wpiepca-sun {
	position: absolute;
	top: 10px;
	left: 50%;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: #ffd98a;
	cursor: ew-resize;
	background: rgba( 10, 12, 16, 0.55 );
	border: 1px solid rgba( 255, 217, 138, 0.4 );
	border-radius: 50%;
	transform: translateX( -50% );
}

.wpiepca-hint {
	position: absolute;
	bottom: 10px;
	left: 50%;
	padding: 3px 12px;
	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% );
}

/* Right: settings. */
.wpiepca-side {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	width: 330px;
	padding: 14px;
	overflow-y: auto;
	border-left: 1px solid var( --ed-border, #333a44 );
}

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

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

/* The two ends of the stack, so nobody has to guess which way it reads. */
#wpie-root .wpiepca-edge {
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 600;
	color: var( --ed-text-dim, #b9c0cc );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 6px;
}

#wpie-root .wpiepca-edge.is-over {
	background: color-mix( in srgb, var( --accent, #3b66ff ) 22%, transparent );
}

#wpie-root .wpiepca-grip {
	display: flex;
	flex: none;
	align-items: center;
	color: var( --ed-text-dim, #b9c0cc );
	cursor: grab;
	opacity: 0.65;
}

#wpie-root .wpiepca-lrow.is-drag {
	opacity: 0.45;
}

/* The drop lands IN FRONT of the row you point at, so the mark sits on
   top of it - the arrow keys used to be the only way to reorder. */
#wpie-root .wpiepca-lrow.is-over {
	box-shadow: inset 0 2px 0 0 var( --accent, #3b66ff );
}

/* Layer stack rows. */
.wpiepca-lstack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wpiepca-lrow {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 6px 8px;
	background: var( --ed-panel, #14171c );
	border: 1px solid var( --ed-border, #333a44 );
	border-radius: 8px;
}

.wpiepca-lrow.is-on {
	border-color: var( --accent, #3b66ff );
}

.wpiepca-lname {
	flex: 1;
	overflow: hidden;
	font-size: 11.5px;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpiepca-lcolor {
	display: inline-flex;
	flex: none;
}

#wpie-root .wpiepca-mini {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var( --ed-text-dim, #b9c0cc );
	cursor: pointer;
	background: var( --ed-panel, #14171c );
	border: 1px solid var( --ed-border, #333a44 );
	border-radius: 6px;
}

#wpie-root .wpiepca-mini:hover:not( :disabled ) {
	color: var( --accent, #3b66ff );
	border-color: var( --accent, #3b66ff );
}

#wpie-root .wpiepca-mini:disabled {
	opacity: 0.35;
	cursor: default;
}

#wpie-root .wpiepca-x:hover:not( :disabled ) {
	color: #ff8a80;
	border-color: #ff8a80;
}

/* Look chips. */
.wpiepca-looks {
	display: grid;
	grid-template-columns: repeat( 8, 1fr );
	gap: 6px;
}

#wpie-root .wpiepca-look {
	height: 26px;
	padding: 0;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 7px;
}

#wpie-root .wpiepca-look.is-on {
	border-color: var( --accent, #3b66ff );
}

/* Animal rows in the layer card. */
.wpiepca-anrow {
	display: flex;
	gap: 6px;
	align-items: center;
}

.wpiepca-anrow .dsm-sliderrow {
	flex: 1;
	min-width: 0;
}

.wpiepca-anname {
	flex: none;
	width: 56px;
	overflow: hidden;
	font-size: 10.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Cutting traffic light + notes. */
.wpiepca-ampel {
	padding: 6px 9px;
	font-size: 11px;
	color: #9fd6a8;
	background: rgba( 74, 222, 128, 0.08 );
	border: 1px solid rgba( 74, 222, 128, 0.35 );
	border-radius: 7px;
}

.wpiepca-ampel.is-warn {
	color: #ffc98f;
	background: rgba( 255, 179, 107, 0.08 );
	border-color: rgba( 255, 179, 107, 0.4 );
}

.wpiepca-note {
	font-size: 11px;
	color: var( --ed-text-muted, #9aa1ab );
}

/* Photo section bits. */
.wpiepca-hist {
	width: 100%;
	height: 56px;
	cursor: ew-resize;
	background: var( --ed-panel, #14171c );
	border: 1px solid var( --ed-border, #333a44 );
	border-radius: 7px;
}

.wpiepca-file {
	font-size: 11px;
}

.wpiepca-fonthost {
	display: block;
	min-width: 0;
}

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

/* v2: object rows nested under their sheet. */
.wpiepca-orow {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-left: 14px;
	padding: 4px 8px;
	cursor: pointer;
	border-left: 2px solid var( --ed-border, #333a44 );
}

.wpiepca-orow.is-on {
	border-left-color: var( --accent, #3b66ff );
	background: rgba( 59, 102, 255, 0.08 );
}

.wpiepca-oname {
	flex: 1;
	overflow: hidden;
	font-size: 11px;
	color: var( --ed-text-dim, #b9c0cc );
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wpie-root .wpiepca-lage .wpiepca-row {
	display: flex;
	gap: 6px;
	align-items: center;
}

#wpie-root .wpiepca-lage .wpiepca-lbl {
	flex: none;
	width: 74px;
	font-size: 10.5px;
}

.wpiepca-lage .dsm-input {
	width: 100%;
}

/* Several words under each other are one text object, so the field has
   to hold line breaks. */
#wpie-root .wpiepca-words {
	width: 100%;
	min-height: 54px;
	resize: vertical;
	box-sizing: border-box;
}