/**
 * Gymnastics Plus - Photo Adjust (shared component)
 * ---------------------------------------------------------------------------
 * Beta round 2 (2026-09-14), Ryan's first report via JP: "they cannot adjust
 * the profile picture into the circle", same for the cover photo. One
 * component, consumed by BOTH doors (js/gp-gymnast-app-edit.js on the app
 * door, js/gp-profile.js on the website) via js/gp-photo-adjust.js, which
 * builds this dialog's markup itself - nothing in either page template.
 *
 * touch-action: none on the stage is load-bearing: without it a one-finger
 * drag on iOS routes to page scroll and a two-finger pinch to the WKWebView's
 * own page zoom instead of the component's own pointer handlers.
 */

.gp-photo-adjust {
	border: 0;
	border-radius: var(--gp-r-lg);
	padding: 20px;
	background: var(--gp-color-surface);
	color: var(--gp-color-text);
	max-width: 340px;
	width: calc(100% - 32px);
	z-index: 100000;
}

.gp-photo-adjust::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.gp-photo-adjust__title {
	margin: 0 0 14px;
	font-weight: 700;
	text-align: center;
}

.gp-photo-adjust__stage {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	background: var(--gp-color-surface-2);
	touch-action: none;
	cursor: grab;
}

.gp-photo-adjust__stage:active {
	cursor: grabbing;
}

.gp-photo-adjust__stage--circle {
	width: 240px;
	height: 240px;
	border-radius: var(--gp-r-full);
}

.gp-photo-adjust__stage--band {
	width: 100%;
	aspect-ratio: 4 / 1;
	border-radius: var(--gp-r-md);
}

.gp-photo-adjust__img {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	max-width: none;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.gp-photo-adjust__zoomrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.gp-photo-adjust__zoomlabel {
	font-size: var(--gp-t-foot);
	color: var(--gp-color-text-muted);
	flex: none;
}

.gp-photo-adjust__zoom {
	flex: 1;
	min-height: 44px;
}

.gp-photo-adjust__error {
	margin: 10px 0 0;
	font-size: var(--gp-t-foot);
	color: var(--gp-color-danger);
}

.gp-photo-adjust__actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.gp-photo-adjust__actions button {
	flex: 1;
	min-height: 44px;
	padding: 8px 15px;
	border-radius: var(--gp-r-full);
	font: inherit;
	font-size: var(--gp-t-foot);
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: transform 120ms ease;
}

.gp-photo-adjust__actions button:active {
	transform: scale(0.95);
}

.gp-photo-adjust__cancel {
	background: var(--gp-color-surface-2);
	color: var(--gp-color-text);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--gp-color-border-strong);
}

.gp-photo-adjust__save {
	background: var(--gp-color-primary);
	color: var(--gp-color-on-primary);
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.gp-photo-adjust__img,
	.gp-photo-adjust__actions button {
		transition: none;
	}
}