/**
 * jsa/pet-configurator — front end and editor.
 *
 * Tokens only (DESIGN-SYSTEM.md): Ink text, Clay meta, square corners like the
 * buttons. Chips rest in Clay, text and edge (5.02:1 on Warm paper, past the
 * 3:1 a control's edge needs); the chosen chip turns Ink with a 2px edge. The
 * room's Brand button comes from .wp-element-button.
 *
 * The scale preview draws the panel at its real proportions: every size is a
 * share of the largest dimension (--jsa-max), so 6x6 beside 18x24 reads true.
 * The stage reserves the largest size's room and the chosen panel sits
 * centred in it, both ways.
 */

/* The whole configurator sits centred in the section. Phones stack the intro
   copy, then the panel and photograph, then the form. Wider screens put the
   panel and photograph on the left and the intro above the form on the right
   (Jeffrey, 2026-09-27): the intro takes the first row, the panel and the form
   start together in the second. */
.jsa-configurator {
	display: grid;
	gap: var(--wp--preset--spacing--flow-gap);
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "intro" "media" "form";
	align-items: center;
}

.jsa-configurator__intro {
	grid-area: intro;
}

.jsa-configurator__media {
	grid-area: media;
}

.jsa-configurator__form {
	grid-area: form;
}

.jsa-configurator__intro > :first-child {
	margin-top: 0;
}

@media (min-width: 782px) {
	.jsa-configurator {
		grid-template-columns: minmax(0, 28rem) minmax(0, 28rem);
		grid-template-rows: auto 1fr;
		/* The panel starts level with the form, not the intro, so when the form
		   pins on scroll the top of the panel is beside it (Jeffrey, 2026-09-27). */
		grid-template-areas: ". intro" "media form";
		justify-content: center;
		align-items: start;
		column-gap: var(--wp--preset--spacing--section-sm);
		row-gap: var(--wp--preset--spacing--md);
	}

	/* Without intro copy the form takes the whole right column. */
	.jsa-configurator:not(:has(.jsa-configurator__intro)) {
		grid-template-rows: 1fr;
		grid-template-areas: "media form";
	}

	/* The form stays in reach while the panel and photograph scroll past
	   (Jeffrey, 2026-09-27). Sticky needs the item top-aligned, not centred.
	   The header doesn't stick, so only the admin bar needs clearing. */
	.jsa-configurator__form {
		align-self: start;
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--flow-gap));
	}
}

/* Media: the panel drawn to scale is the main element; the chosen size's
   example photograph, when it has one, sits below it, smaller. The page has
   other work to look at, so the photograph stays secondary. */
.jsa-configurator__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--flow-gap);
	min-width: 0;
}

.jsa-configurator__photo,
.jsa-configurator__scale {
	margin: 0;
}

.jsa-configurator__photo {
	width: min(100%, 18rem);
}

/* Phones: the panel and the photograph share one slot as a swipe strip
   (native scroll-snap, no script), panel first so a chip tap visibly changes
   it right above the form; the photograph peeks in at the edge as the hint
   (Jeffrey, 2026-09-27). With no photograph for the size, the panel takes the
   full width and there's nothing to swipe. */
@media (max-width: 781px) {
	.jsa-configurator__media {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--sm);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		/* Room for the shadows, which overflow would otherwise clip; and the
		   strip runs to the screen edges (out through the page gutter) so the
		   peek reads as "swipe", while slides still land on the gutter. */
		padding: var(--wp--preset--spacing--sm) var(--wp--custom--spacing--page-inline) var(--wp--preset--spacing--md);
		margin: calc(-1 * var(--wp--preset--spacing--sm)) calc(-1 * var(--wp--custom--spacing--page-inline)) calc(-1 * var(--wp--preset--spacing--md));
		scroll-padding-inline: var(--wp--custom--spacing--page-inline);
	}

	.jsa-configurator__media::-webkit-scrollbar {
		display: none;
	}

	.jsa-configurator__scale,
	.jsa-configurator__photo {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}

	.jsa-configurator__media:has(.jsa-configurator__photo[hidden]) .jsa-configurator__scale {
		flex-basis: 100%;
	}

	.jsa-configurator__photo {
		display: flex;
		flex-direction: column; /* the image, then its caption */
		justify-content: center;
		align-items: center; /* not stretch: a stretched img loses its shape */
		width: auto;
	}

	.jsa-configurator__photo[hidden] {
		display: none;
	}

	/* Both dimensions auto under both limits keeps the proportions; the extra
	   class outranks the base `width: 100%` rule later in this file, which
	   otherwise stretched the box to the slide's width under the height cap.
	   object-fit is the safety net. */
	.jsa-configurator .jsa-configurator__photo img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 22rem;
		object-fit: contain;
	}
}

.jsa-configurator__photo img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: var(--wp--preset--shadow--jsa-depth-3);
}

/* Side by side, a tall example (12x24 at 18rem wide is ~36rem) would run far
   below the form; cap its height and let the width follow, centred over its
   caption (Jeffrey, 2026-09-29). Phones have their own 22rem cap above. */
@media (min-width: 782px) {
	.jsa-configurator .jsa-configurator__photo img {
		width: auto;
		max-width: 100%;
		max-height: 24rem;
		margin-inline: auto;
	}
}

/* The stage is as tall as the largest dimension, capped by its own column
   (container units), so a portrait-wide 18x24 never overflows a narrow column.
   The chosen panel sits centred in it, both ways; room is kept all round for
   the dimension labels. The stage is Light room on the Paper section, so it
   reads as the place where the panel appears, starting level with the form
   (Jeffrey, 2026-09-29). */
.jsa-configurator__scale {
	container-type: inline-size;
	width: 100%;
}

.jsa-configurator__stage {
	--jsa-stage: min(26rem, calc(100cqw - 4rem));
	--jsa-label-room: 2.5rem;
	position: relative;
	box-sizing: border-box;
	height: calc(var(--jsa-stage) + 2 * var(--jsa-label-room));
	padding: var(--jsa-label-room);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--base);
	/* How far the turned-over ghost reaches past the panel on each side (0 for
	   a square); the dimension lines step out by it so the ghost never crosses
	   them. */
	--jsa-ghost-x: calc(max(0, var(--jsa-h) - var(--jsa-w)) / 2 / var(--jsa-max) * var(--jsa-stage));
	--jsa-ghost-y: calc(max(0, var(--jsa-w) - var(--jsa-h)) / 2 / var(--jsa-max) * var(--jsa-stage));
}

/* The other orientation: the size is the client's choice, the orientation is
   Jeffrey's, decided when he composes the painting and approved with the
   design. The same panel turned on its side sits behind it as a dashed Clay
   tint outline, so the stage says "this big, one way or the other" without a
   control to choose it (Jeffrey, 2026-09-29). A square's ghost matches the
   panel and hides behind it. Decorative, like the stage it's drawn on. */
.jsa-configurator__stage::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: calc(var(--jsa-h) / var(--jsa-max) * var(--jsa-stage));
	height: calc(var(--jsa-w) / var(--jsa-max) * var(--jsa-stage));
	border: 1px dashed var(--wp--preset--color--clay-tint);
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: width 0.25s ease-in-out, height 0.25s ease-in-out;
}

.jsa-configurator__panel {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: calc(var(--jsa-w) / var(--jsa-max) * var(--jsa-stage));
	height: calc(var(--jsa-h) / var(--jsa-max) * var(--jsa-stage));
	background: var(--wp--preset--color--base);
	/* Hairline, not Clay: the shadow carries the edge, the hairline only keeps
	   the top (where the shadow doesn't reach) from dissolving into Paper. */
	border: 1px solid var(--wp--preset--color--border-light);
	/* Sits off the wall like the real thing: 3 · 3/4" panel (Jeffrey, 2026-09-27). */
	box-shadow: var(--wp--preset--shadow--jsa-depth-3);
	transition: width 0.25s ease-in-out, height 0.25s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.jsa-configurator__panel,
	.jsa-configurator__stage::before {
		transition: none;
	}
}

.jsa-configurator__paws {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4%;
}

.jsa-configurator__paw {
	width: 42%;
	max-width: 6rem;
	fill: none;
	stroke: var(--wp--preset--color--clay-tint);
	stroke-width: 2;
	flex: 0 1 auto;
}

.jsa-configurator__panel[data-count="2"] .jsa-configurator__paw {
	width: 30%;
}

.jsa-configurator__panel[data-count="3"] .jsa-configurator__paw {
	width: 24%;
}

.jsa-configurator__panel[data-count]:not([data-count="1"]) .jsa-configurator__paw:nth-child(2) {
	transform: rotate(-8deg) translateY(-6%);
}

.jsa-configurator__panel[data-count]:not([data-count="1"]) .jsa-configurator__paw:nth-child(3) {
	transform: rotate(9deg) translateY(5%);
}

/* Dimension lines, like a drawing: a hairline along the bottom and the right
   edge, the length of the panel, broken in the middle by its measurement. The
   height reads along its line. Lines are Clay tint (a decorative mark), the
   numbers Clay. They live inside the panel, so they follow it as it resizes. */
.jsa-configurator__dim {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
	line-height: 1;
	white-space: nowrap;
}

.jsa-configurator__dim::before,
.jsa-configurator__dim::after {
	content: "";
	flex: 1 1 0;
	background: var(--wp--preset--color--clay-tint);
}

.jsa-configurator__dim--w {
	top: calc(100% + 0.875rem + var(--jsa-ghost-y));
	left: 0;
	width: 100%;
}

.jsa-configurator__dim--w::before,
.jsa-configurator__dim--w::after {
	height: 1px;
}

/* vertical-rl turns the flex row vertical, so the same line / number / line
   runs down the right edge with the number reading along it. */
.jsa-configurator__dim--h {
	top: 0;
	left: calc(100% + 0.875rem + var(--jsa-ghost-x));
	height: 100%;
	writing-mode: vertical-rl;
}

.jsa-configurator__dim--h::before,
.jsa-configurator__dim--h::after {
	width: 1px;
}

/* The theme restates figcaptions left-aligned like gallery labels at (0,2,0);
   these are centred under the panel and the photograph, so they outrank that.
   The photograph's caption names its size (Example 8x10", Jeffrey
   2026-09-28), so it reads as an example, not the painting being bought. */
.jsa-configurator .jsa-configurator__scale .jsa-configurator__scale-label,
.jsa-configurator .jsa-configurator__photo .jsa-configurator__photo-label {
	margin-top: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
	text-align: center;
}

/* The orientation line sits under the size line, for sizes that can go
   either way: the ghost shows it, this says whose call it is (Jeffrey,
   2026-09-29). A square hides it but keeps its room, so the chips below
   don't jump under the visitor's finger when a square size is picked. */
.jsa-configurator__orientation {
	display: block;
}

.jsa-configurator__orientation[hidden] {
	visibility: hidden;
}

/* The form. */
.jsa-configurator__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	margin: 0;
}

.jsa-configurator__field {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.jsa-configurator__legend {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.jsa-configurator__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

/* Ollie's style.css makes every label a full-width block; chips sit in a row.
   No text selection or iOS callout on a long press: a chip is a control. */
.jsa-configurator__chip {
	position: relative;
	display: inline-block;
	width: auto;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.jsa-configurator__chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: inherit;
}

.jsa-configurator__chip span {
	display: inline-block;
	min-width: 2.75rem;
	padding: 0.625rem 0.75rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	/* One weight in every state, so a chosen chip never widens and nudges its
	   row (2026-10-03, with the Paintings filter chips); colour, edge and
	   ground carry the state. */
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--wp--preset--color--secondary);
	background: transparent;
	border: 1px solid var(--wp--preset--color--secondary);
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.jsa-configurator__chip:hover input:not(:disabled) + span {
	color: var(--wp--preset--color--main);
	border-color: var(--wp--preset--color--main);
}

.jsa-configurator__chip input:checked + span {
	color: var(--wp--preset--color--main);
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--main);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--main);
}

.jsa-configurator__chip input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 2px;
}

.jsa-configurator__chip:has(input:disabled) {
	cursor: not-allowed;
}

.jsa-configurator__chip input:disabled + span {
	color: var(--wp--preset--color--secondary);
	border-style: dashed;
	opacity: 0.55;
}

.jsa-configurator__note {
	margin: var(--wp--preset--spacing--xs) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

.jsa-configurator__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	color: var(--wp--preset--color--main);
	font-variant-numeric: lining-nums;
}

.jsa-configurator__submit .wp-block-button__link:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.jsa-configurator.is-placeholder {
	display: block;
	padding: var(--wp--preset--spacing--md);
	border: 1px dashed var(--wp--preset--color--clay-tint);
	font-size: var(--wp--preset--font-size--small);
}