/**
 * In-room preview.
 *
 * The dialog is deliberately plain: the room photograph and the piece on the
 * wall are the content, and chrome competing with them makes the preview harder
 * to read, not easier.
 *
 * Plain, but on the standard (`docs/design-standards.md`): the dialog's shape,
 * scrim, width and head are the shared dialog's (an H3 title and a round
 * close icon), the trigger and Download image are the secondary button, the
 * room and zoom chips are the 40px filter chip, and every one of them takes
 * the one focus ring. The
 * trigger is also drawn on the product page by `product.css`, and in the cart
 * and the account by their own stylesheets; this is its shape everywhere else.
 */

.pod-viz {
	margin: 0 0 var( --pod-near );
}

/*
 * Every ghost control here says `color: inherit`, and that is not decoration.
 *
 * They have no background, a hairline border drawn from `currentColor`, and the
 * theme's own type — the intent being that they inherit the page's colour so the
 * plugin never looks bolted on. But a `<button>` does not inherit colour by
 * default, and Astra sets `button { color: #fff }` for its filled buttons. So
 * removing the background without setting the colour left white text and a white
 * border on a white page, and every one of these was invisible until hovered,
 * which restored the theme's background.
 *
 * `color: inherit` takes the colour from the surrounding element rather than the
 * button default, which is what the intent actually requires.
 */
.pod-viz__open {
	align-items: center;
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-ink );
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var( --pod-btn-size );
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: var( --pod-btn-h );
	padding: 0 var( --pod-btn-x );
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
	width: 100%;
}

/*
 * These are ghost `<button>`s, and Astra paints every button on hover and focus:
 *
 *     button:focus, button:hover, … { color: #ffffff; background-color: …; }
 *
 * `button:hover` is one class and one element, which beats a bare
 * `.pod-viz__open` — so without this the trigger became a filled blue theme
 * button under the pointer and the dialog's own controls went white on a white
 * sheet. Written as `button.pod-viz__open` so it outranks the theme rather than
 * tying with it and depending on which stylesheet loaded second, and so it
 * travels with the component to the cart, the order screen and My Designs, where
 * the same button is rendered.
 *
 * Same fault and same shape of fix as the size presets; the note in
 * `product-form.css` has the longer version.
 */
button.pod-viz__open:hover,
button.pod-viz__open:focus,
button.pod-viz__save:hover,
button.pod-viz__save:focus,
button.pod-viz__chip:hover,
button.pod-viz__chip:focus {
	background-color: var( --pod-surface );
	color: var( --pod-ink );
}

/* The close icon stays transparent under Astra's `button:focus` paint. */
button.pod-viz__close:hover,
button.pod-viz__close:focus {
	background-color: transparent;
	color: var( --pod-ink );
}

/* The secondary button's hover: surface-2 and an ink edge. */
button.pod-viz__open:hover,
button.pod-viz__save:hover {
	background-color: var( --pod-surface-2 );
	border-color: var( --pod-ink );
}

button.pod-viz__chip:hover,
button.pod-viz__close:hover {
	background-color: var( --pod-surface-2 );
}

/* The one focus ring, on every control in and around the preview. */
.pod-viz__open:focus-visible,
.pod-viz__save:focus-visible,
.pod-viz__close:focus-visible,
.pod-viz__chip:focus-visible,
.pod-viz__swatch:focus-visible,
input[type="color"].pod-viz__custom:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

/*
 * The same button, inline beside other controls.
 *
 * `width: 100%` is right in the product page's own column, where the button is
 * the only thing on its row, and wrong everywhere the piece is already decided:
 * under a cart line's name, beside *Order again* on an order, and among the
 * actions on a saved design. Scoped to those places rather than made
 * conditional on the class, so the product page is untouched.
 *
 * Left as the outline button it already is rather than given the theme's filled
 * `.button` look. Beside a filled primary action an outline reads as the
 * secondary one, which is what it is — and it avoids a specificity argument with
 * a theme over which of the two styles wins.
 */
.woocommerce-cart-form .pod-viz__open,
.pod-reorder__line .pod-viz__open,
.pod-designs__actions .pod-viz__open {
	font-size: var( --pod-btn-compact-size );
	min-height: var( --pod-btn-compact-h );
	padding: 0 var( --pod-near );
	width: auto;
}

/* The cart's sits under the product name rather than in a row with it. */
.woocommerce-cart-form .pod-viz__open {
	margin-top: var( --pod-tight );
}

/* --- Dialog ------------------------------------------------------------ */

/*
 * A column, so the picture takes the room that is left rather than the room it
 * would like.
 *
 * The stage used to be as tall as its own width times 0.66 whatever the screen,
 * so on an ordinary laptop the dialog came to about 810px of content inside a
 * 740px box — and Save and Close ended up below the fold, reachable only by
 * scrolling inside the dialog. Nobody scrolls a dialog to find its buttons.
 */
.pod-viz__dialog {
	/*
	 * How tall the picture is, and therefore how wide the dialog may be.
	 *
	 * The stage keeps its 3:2 shape, which is the shape a room photograph is —
	 * cover-fitting a 3:2 photo into anything flatter crops its skirting and
	 * floor away, and those are what tell you how big the wall is. So rather
	 * than squashing the picture to fit the screen, the dialog narrows until the
	 * picture fits at its proper shape.
	 */
	--pod-viz-stage: clamp( 220px, 52vh, 30rem );

	/*
	 * The standard's dialog: radius-xl, the lifted shadow, and the gutter-based
	 * width (it was `94vw`, 12px a side on a phone against the page's 20). The
	 * picture's own limit stays third, and on a laptop it is the one that
	 * decides.
	 */
	background: var( --pod-surface );
	border: 0;
	border-radius: var( --pod-radius-xl );
	box-shadow: var( --pod-shadow-lift );
	box-sizing: border-box;
	color: var( --pod-ink );
	max-height: 92vh;
	max-width: min( 44rem, calc( 100vw - 2 * var( --pod-gutter ) ), calc( var( --pod-viz-stage ) / 0.66 ) );
	padding: 0;
	width: 100%;
}

/*
 * The column layout belongs to the **open** state, and that `[open]` is
 * load-bearing.
 *
 * A closed `<dialog>` is hidden by one rule in the browser's own stylesheet —
 * `dialog:not([open]) { display: none }` — and an author rule beats a
 * user-agent rule whatever its specificity. So `display: flex` on the bare class
 * kept the preview on screen permanently: it sat in the page flow with no
 * backdrop, and pressing "Close preview" did close the dialog while changing
 * nothing anyone could see, because `close()` only removes the attribute this
 * rule was ignoring.
 *
 * Exactly the trap already recorded below for `.pod-viz__empty[hidden]`, which
 * is a chastening thing to walk into twice in one file.
 */
.pod-viz__dialog[open] {
	display: flex;
	flex-direction: column;
}

/* Ink, not black, behind every dialog. */
.pod-viz__dialog::backdrop {
	background: var( --pod-scrim );
}

/*
 * A definite height, taken from the viewport — deliberately not from the canvas
 * inside it.
 *
 * `flex: 1 1 auto` looked right and was not: the canvas is sized `height: 100%`,
 * which against an auto-height parent falls back to the canvas's own
 * width/height **attributes** — and `measure()` writes those. The stage's height
 * depended on the canvas and the canvas on the stage, and the pair settled
 * wherever they happened to land.
 */
/*
 * The standard dialog head: the title and a 40px round close button, 16px by
 * 24 of padding, and a line under it. It sits above the picture, so the dark
 * stage no longer meets the dialog's rounded corners.
 */
.pod-viz__head {
	align-items: center;
	border-bottom: 1px solid var( --pod-line );
	display: flex;
	flex: 0 0 auto;
	gap: var( --pod-near );
	justify-content: space-between;
	padding: var( --pod-near ) var( --pod-apart );
}

/* The card heading (§3): a dialog's title is one. */
.pod-viz__dialog .pod-viz__title {
	color: var( --pod-ink );
	font-size: var( --pod-h3-size );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
	text-wrap: balance;
}

/* The standard's icon button: 40px round, transparent, surface-2 on hover. */
.pod-viz__close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var( --pod-radius-pill );
	color: var( --pod-ink );
	cursor: pointer;
	display: inline-flex;
	flex: none;
	height: 40px;
	justify-content: center;
	padding: 0;
	transition: background-color var( --pod-fast ) var( --pod-ease );
	width: 40px;
}

/* Ink behind the room until the photograph paints, and behind the empty message. */
.pod-viz__stage {
	background: var( --pod-ink );
	flex: 0 0 auto;
	height: var( --pod-viz-stage );
	position: relative;
}

/*
 * The canvas fills the stage exactly, and `measure()` reads the stage's real
 * height rather than deriving one from the width. Those two go together: a
 * backing store whose shape disagrees with its CSS box is stretched, and the
 * piece would no longer be the size it says it is.
 */
.pod-viz__stage canvas {
	cursor: grab;
	display: block;
	height: 100%;
	touch-action: none;
	width: 100%;
}

.pod-viz__stage canvas:active {
	cursor: grabbing;
}

.pod-viz__empty {
	color: var( --pod-on-ink );
	inset: 0;
	display: grid;
	margin: 0;
	place-content: center;
	position: absolute;
	text-align: center;
}

/*
 * `display: grid` above is a class rule, so it outranks the browser's own
 * single-attribute `[hidden] { display: none }` — and the empty-state message
 * stayed painted over the wall for the whole life of the dialog, however many
 * times the script set `empty.hidden = true`. Attribute plus class outranks it
 * back, which is why this needs no `!important`.
 */
.pod-viz__empty[hidden] {
	display: none;
}

/* --- Controls ---------------------------------------------------------- */

/* The standard dialog body's 24 of padding, and the space scale between rows. */
.pod-viz__controls {
	flex: 0 0 auto;
	padding: var( --pod-near ) var( --pod-apart ) var( --pod-apart );
}

.pod-viz__group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --pod-tight );
	margin-bottom: var( --pod-tight );
}

/*
 * The rooms and the zoom steps: the standard's filter chip, a 40px pill with a
 * `--pod-line` edge. It was 33px, and 44 only for a coarse pointer.
 */
.pod-viz__chip {
	align-items: center;
	background: var( --pod-surface );
	border: 1px solid var( --pod-line );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-ink );
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var( --pod-btn-compact-size );
	font-weight: 600;
	line-height: 1.2;
	min-height: var( --pod-btn-compact-h );
	padding: 0 var( --pod-near );
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

/*
 * The wall colours: 40px dots, the smallest target the standard allows. The
 * edge is the field border, so a white wall still shows as a dot on white.
 */
.pod-viz__swatch {
	border: 1px solid var( --pod-field-border );
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
	height: 40px;
	padding: 0;
	width: 40px;
}

.pod-viz__swatch:hover {
	border-color: var( --pod-ink );
}

/*
 * Typed as an element-plus-class selector on purpose. Astra ships
 * `input[type="color"] { width: 100px }`, which outranks a bare class — so this
 * came out a 100 by 30 ellipse rather than the round swatch it is meant to
 * match, `border-radius: 50%` making the mismatch unmistakable.
 */
input[type="color"].pod-viz__custom {
	background: none;
	border: 1px solid var( --pod-field-border );
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
	height: 40px;
	padding: 0;
	width: 40px;
}

/* The standard's helper text: 0.8125rem in ink-soft, which passes 4.5:1 where 70% of the ink did not reliably. */
.pod-viz__hint {
	color: var( --pod-ink-soft );
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 0 0 var( --pod-near );
}

.pod-viz__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --pod-tight );
	justify-content: flex-end;
}

/*
 * Download image: the standard's secondary button. It is not the reason the
 * dialog exists (the picture is), so it is not filled.
 */
.pod-viz__save {
	align-items: center;
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-ink );
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var( --pod-btn-size );
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: var( --pod-btn-h );
	padding: 0 var( --pod-btn-x );
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

/*
 * The magnification readout, between its two buttons.
 *
 * A moulding is a few pixels wide at true scale, so the frame a customer paid
 * extra for is invisible until they can step nearer to it. The readout is here
 * rather than in the hint because the hint says the more important thing: that
 * stepping closer has not changed the size of anything.
 */
.pod-viz__zoom {
	color: var( --pod-ink-soft );
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	min-width: 2.25em;
	text-align: center;
}

/* The standard's disabled control. */
.pod-viz__chip[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

/*
 * Download image sits at the left of the action row, where it has always been.
 * Close used to sit at the right, and the two mean opposite things; it is the
 * icon in the dialog's head now, well away from it.
 */
.pod-viz__save {
	margin-right: auto;
}

/* The zoom control is one thing, so it wraps as one thing. */
.pod-viz__zoomer {
	align-items: center;
	display: inline-flex;
	flex-wrap: nowrap;
	gap: var( --pod-tight );
}

/*
 * Finger-sized targets where there is a finger.
 *
 * The chips were 33px and the swatches 28, which is fine for a cursor and under
 * every touch guideline there is — on a feature whose whole point is taking a
 * photo of your wall and dragging a picture around it. The standard's 40px now
 * holds for every pointer; a coarse one takes the chips to 44 as well.
 */
@media ( pointer: coarse ) {
	.pod-viz__chip {
		min-height: 44px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pod-viz__open,
	.pod-viz__save,
	.pod-viz__close,
	.pod-viz__chip {
		transition: none;
	}
}