/**
 * Minecraft Pixel Art Generator - structural styles.
 * Every visual value comes from CSS custom properties written by the admin
 * design settings, so themes stay fully customisable without touching CSS.
 */

.mcpag-wrap {
	/* What the shape dropdown is placed against: it is a child of the tool so
	   that no scrolling row can clip it, and it is put where the button that
	   opened it is. */
	position: relative;
	box-sizing: border-box;
	max-width: var(--mcpag-max-width, 1180px);
	margin: 0 auto;
	/* Outer padding is its own value, not the panel's: edge to edge is a
	   reasonable thing to want from a tool that sits inside a page column
	   which already has its own gutters. */
	padding: var(--mcpag-wrap-padding, 20px 0);
	background: var(--mcpag-wrap-bg, #f6f7f9);
	color: var(--mcpag-text, #1f2937);
	font-family: var(--mcpag-font, sans-serif);
	font-size: var(--mcpag-font-size, 15px);
	letter-spacing: var(--mcpag-letter-spacing, 0);
	line-height: 1.55;
	border-radius: var(--mcpag-radius, 12px);
}

.mcpag-wrap *,
.mcpag-wrap *::before,
.mcpag-wrap *::after {
	box-sizing: border-box;
}

/* Elements toggled with the hidden attribute must win over the display rules
   below, which would otherwise keep them on screen. */
.mcpag-wrap [hidden] {
	display: none !important;
}

.mcpag-wrap.mcpag-rtl {
	direction: rtl;
}

/* Header ---------------------------------------------------------------- */

.mcpag-header {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--mcpag-gap, 20px);
}

.mcpag-title {
	margin: 0 0 4px;
	color: var(--mcpag-heading, #111827);
	font-size: var(--mcpag-heading-size, 28px);
	font-weight: var(--mcpag-font-weight, 600);
	line-height: 1.2;
}

.mcpag-subtitle {
	margin: 0;
	color: var(--mcpag-muted, #6b7280);
}

.mcpag-lang {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcpag-lang-label {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.9em;
}

.mcpag-lang .mcpag-input {
	width: auto;
	min-width: 140px;
}

/* Layout ---------------------------------------------------------------- */

.mcpag-body {
	display: grid;
	grid-template-columns: var(--mcpag-sidebar-width, 330px) minmax(0, 1fr);
	gap: var(--mcpag-gap, 20px);
	align-items: start;
}

.mcpag-layout-stacked .mcpag-body {
	grid-template-columns: minmax(0, 1fr);
}

.mcpag-sidebar,
.mcpag-main {
	display: flex;
	flex-direction: column;
	gap: var(--mcpag-gap, 20px);
	min-width: 0;
}

.mcpag-layout-stacked .mcpag-sidebar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 860px) {
	.mcpag-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Panels ---------------------------------------------------------------- */

.mcpag-panel {
	padding: var(--mcpag-panel-padding, 22px);
	background-color: var(--mcpag-panel-bg, #ffffff);
	background-image: var(--mcpag-panel-texture, none);
	background-size: 16px 16px;
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: var(--mcpag-shadow, none);
}

.mcpag-texture-dots .mcpag-panel {
	color: var(--mcpag-border, #e5e7eb);
}

.mcpag-texture-dots .mcpag-panel > * {
	color: var(--mcpag-text, #1f2937);
}

.mcpag-panel-title {
	margin: 0 0 14px;
	color: var(--mcpag-heading, #111827);
	font-size: var(--mcpag-panel-title-size, 17px);
	font-weight: var(--mcpag-font-weight, 600);
}

.mcpag-panel-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.mcpag-panel-head .mcpag-panel-title {
	margin: 0;
}

/* Form elements --------------------------------------------------------- */

.mcpag-field {
	margin-bottom: 14px;
}

.mcpag-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* A field that decides the ones beside it — the size dropdown over the width
   and height it fills in — takes the whole row rather than a half of it. */
.mcpag-field-wide {
	grid-column: 1 / -1;
}

.mcpag-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.88em;
	font-weight: 500;
}

.mcpag-input {
	display: block;
	width: 100%;
	padding: 9px 11px;
	background: var(--mcpag-input-bg, #ffffff);
	color: var(--mcpag-input-text, #111827);
	font-family: inherit;
	font-size: inherit;
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-input-border, #d1d5db);
	border-radius: var(--mcpag-btn-radius, 8px);
	transition: border-color var(--mcpag-transition, 0.18s ease), box-shadow var(--mcpag-transition, 0.18s ease);
}

.mcpag-input:focus {
	outline: none;
	border-color: var(--mcpag-accent, #2563eb);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcpag-accent, #2563eb) 30%, transparent);
}

/* Every dropdown draws its own arrow. The native one is painted by the
   browser in a colour it chooses, which disappears against a dark panel; this
   one is built from the theme's own input text colour, so it is visible
   whatever palette the site runs. */
.mcpag-wrap select.mcpag-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: var(--mcpag-select-arrow);
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-inline-end: 36px;
	cursor: pointer;
}

.mcpag-wrap.mcpag-rtl select.mcpag-input {
	background-position: left 12px center;
}

/* A select with no arrow at all is worse than the native one, so if the
   custom property never arrives the browser keeps its own. */
@supports not (background-image: var(--mcpag-select-arrow)) {
	.mcpag-wrap select.mcpag-input {
		appearance: auto;
		-webkit-appearance: auto;
		padding-inline-end: 11px;
	}
}

.mcpag-range {
	width: 100%;
	margin: 4px 0 0;
	accent-color: var(--mcpag-accent, #2563eb);
}

.mcpag-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 0.92em;
}

.mcpag-check input {
	accent-color: var(--mcpag-accent, #2563eb);
	margin: 0;
}

.mcpag-check-inline {
	margin-bottom: 0;
}

.mcpag-hint {
	margin: 8px 0 0;
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.82em;
}

/* Buttons --------------------------------------------------------------- */

.mcpag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--mcpag-btn-padding, 11px 18px);
	background: var(--mcpag-btn2-bg, #e5e7eb);
	color: var(--mcpag-btn2-text, #1f2937);
	font-family: inherit;
	font-size: var(--mcpag-btn-font-size, 15px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: inherit;
	text-transform: var(--mcpag-btn-transform, none);
	text-decoration: none;
	border: var(--mcpag-border-width, 1px) solid transparent;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
	transition: background-color var(--mcpag-transition, 0.18s ease),
		transform var(--mcpag-transition, 0.18s ease),
		box-shadow var(--mcpag-transition, 0.18s ease);
}

.mcpag-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.mcpag-btn-primary {
	background: var(--mcpag-btn-bg, #2563eb);
	color: var(--mcpag-btn-text, #ffffff);
}

.mcpag-btn-primary:hover:not(:disabled) {
	background: var(--mcpag-btn-hover-bg, #1d4ed8);
}

.mcpag-btn-secondary:hover:not(:disabled) {
	background: var(--mcpag-btn2-hover-bg, #d1d5db);
}

.mcpag-btn-ghost {
	background: transparent;
	color: var(--mcpag-muted, #6b7280);
	border-color: var(--mcpag-border, #e5e7eb);
}

.mcpag-btn-ghost:hover:not(:disabled) {
	color: var(--mcpag-text, #1f2937);
	border-color: var(--mcpag-accent, #2563eb);
}

.mcpag-btn-block {
	width: 100%;
}

.mcpag-btn-small {
	padding: 6px 12px;
	font-size: 0.82em;
}

/* Button styles */

.mcpag-btn-gradient .mcpag-btn-primary {
	background-image: linear-gradient(180deg,
		color-mix(in srgb, var(--mcpag-btn-bg) 85%, white),
		var(--mcpag-btn-bg));
}

.mcpag-btn-outline .mcpag-btn-primary {
	background: transparent;
	color: var(--mcpag-btn-bg);
	border-color: var(--mcpag-btn-bg);
}

.mcpag-btn-outline .mcpag-btn-primary:hover:not(:disabled) {
	background: var(--mcpag-btn-bg);
	color: var(--mcpag-btn-text);
}

.mcpag-btn-bevel .mcpag-btn {
	border-style: solid;
	border-width: var(--mcpag-border-width, 3px);
	border-top-color: rgba(255, 255, 255, 0.45);
	border-left-color: rgba(255, 255, 255, 0.25);
	border-right-color: rgba(0, 0, 0, 0.45);
	border-bottom-color: rgba(0, 0, 0, 0.55);
}

/* Hover effects */

.mcpag-hover-lift .mcpag-btn:hover:not(:disabled) {
	transform: translateY(-2px);
}

.mcpag-hover-press .mcpag-btn:active:not(:disabled) {
	transform: translateY(2px);
}

.mcpag-hover-press .mcpag-btn:hover:not(:disabled) {
	filter: brightness(1.08);
}

.mcpag-hover-glow .mcpag-btn:hover:not(:disabled) {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcpag-accent) 40%, transparent);
}

.mcpag-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

/* Drop zone ------------------------------------------------------------- */

.mcpag-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 22px 16px;
	text-align: center;
	background: var(--mcpag-dropzone-bg, #f8fafc);
	border: 2px dashed var(--mcpag-dropzone-border, #cbd5e1);
	border-radius: var(--mcpag-radius, 12px);
	cursor: pointer;
	transition: border-color var(--mcpag-transition, 0.18s ease), background-color var(--mcpag-transition, 0.18s ease);
}

.mcpag-dropzone.is-dragging {
	border-color: var(--mcpag-accent, #2563eb);
	background: color-mix(in srgb, var(--mcpag-accent) 12%, var(--mcpag-dropzone-bg));
}

.mcpag-dropzone-icon {
	width: 34px;
	height: 34px;
	color: var(--mcpag-accent, #2563eb);
}

.mcpag-dropzone-text {
	margin: 0;
	font-weight: 600;
}

.mcpag-dropzone-or {
	margin: 0;
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.82em;
	text-transform: uppercase;
}

.mcpag-url-row {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.mcpag-url-row .mcpag-input {
	flex: 1 1 auto;
}

.mcpag-preview {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--mcpag-border, #e5e7eb);
}

.mcpag-preview-label {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.82em;
	text-transform: uppercase;
}

.mcpag-preview-img {
	display: block;
	max-width: 100%;
	max-height: 160px;
	border: 1px solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
}

/* Palette --------------------------------------------------------------- */

.mcpag-palette-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.mcpag-palette {
	max-height: 380px;
	overflow-y: auto;
	padding-right: 4px;
}

.mcpag-palette-group {
	margin-bottom: 6px;
	border-bottom: 1px solid var(--mcpag-border, #e5e7eb);
}

.mcpag-palette-summary {
	padding: 6px 0;
	cursor: pointer;
	font-size: 0.86em;
	font-weight: 600;
	color: var(--mcpag-heading, #111827);
}

.mcpag-palette-list {
	display: grid;
	gap: 2px;
	padding: 4px 0 10px;
}

.mcpag-swatch {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 4px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.82em;
}

.mcpag-swatch:hover {
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
}

.mcpag-swatch input {
	margin: 0;
	accent-color: var(--mcpag-accent, #2563eb);
}

.mcpag-swatch-chip {
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: 1px solid rgba(0, 0, 0, 0.35);
	vertical-align: middle;
}

.mcpag-swatch-chip.is-empty {
	background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%),
		linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%);
	background-size: 8px 8px;
	background-position: 0 0, 4px 4px;
}

.mcpag-swatch-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Canvas ---------------------------------------------------------------- */

/* Three glyphs and a number, sharing the heading's line rather than taking
   one of their own. */
.mcpag-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 0.86em;
}

.mcpag-tools .mcpag-zoom-readout {
	margin-inline-start: 6px;
}

.mcpag-canvas-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* `safe` keeps the start of an overflowing preview reachable; centring on
	   its own would push it out of the scrollable area. */
	align-items: safe center;
	justify-content: safe center;
	/* A working area rather than a thumbnail. The box used to be as tall as
	   whatever it was showing, with a 220px floor, so a small build got a
	   small stage and a wide column of empty page beside it. On a desktop
	   the picture is the thing on the page worth the most room, so the box
	   claims a share of the window whatever is in it. */
	min-height: min(58vh, 520px);
	/* A bounded viewport for the zoom. Without it, zooming in would stretch
	   the panel down the page instead of scrolling inside the box. */
	max-height: 78vh;
	padding: 14px;
	overflow: auto;
	background-color: var(--mcpag-canvas-bg, #f8fafc);
	background-image:
		linear-gradient(45deg, rgba(128, 128, 128, 0.12) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, 0.12) 75%),
		linear-gradient(45deg, rgba(128, 128, 128, 0.12) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, 0.12) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
}

/* A phone has no room to give away: the shell already sizes the picture from
   the screen, and in the other mobile arrangements a half-screen-tall empty
   box before the first control is the opposite of helpful. Both ends stay
   where they were, so the extra room the desktop just took is the desktop's
   alone. */
.mcpag-is-mobile .mcpag-canvas-wrap {
	min-height: 220px;
	max-height: 70vh;
}

/* =======================================================================
   The workspace, and what fullscreen does with it

   Fullscreen used to take the picture on its own, which made it a slideshow:
   bigger, and with nothing to do to it. It takes this box instead — the
   tools, the picture, the numbers on it and the downloads under it — so
   going fullscreen gives more of everything rather than less of it.
   ======================================================================= */

.mcpag-workspace {
	/* What every floating panel is placed against, and what fullscreen takes,
	   which have to be the same element: fullscreen renders one subtree, so a
	   panel outside it does not appear behind the picture, it does not appear
	   at all. */
	position: relative;
	min-width: 0;
}

.mcpag-workspace:fullscreen,
.mcpag-workspace.is-expanded {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 10px;
	background: var(--mcpag-panel-bg, #ffffff);
	overflow: hidden;
}

.mcpag-workspace.is-expanded {
	position: fixed;
	inset: 0;
	z-index: 99998;
	height: 100vh;
}

/* The picture takes everything the rows around it leave, rather than the
   height it had on the page. */
.mcpag-workspace:fullscreen .mcpag-stage-frame,
.mcpag-workspace.is-expanded .mcpag-stage-frame {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
}

.mcpag-workspace:fullscreen .mcpag-canvas-wrap,
.mcpag-workspace.is-expanded .mcpag-canvas-wrap {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	max-height: none;
}

.mcpag-workspace:fullscreen .mcpag-editor,
.mcpag-workspace.is-expanded .mcpag-editor,
.mcpag-workspace:fullscreen .mcpag-exports,
.mcpag-workspace.is-expanded .mcpag-exports {
	flex: 0 0 auto;
	margin: 0;
}

/* The downloads stay on one line that scrolls rather than eating three rows
   of a screen that is meant to be mostly picture. */
.mcpag-workspace:fullscreen .mcpag-exports,
.mcpag-workspace.is-expanded .mcpag-exports {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.mcpag-workspace:fullscreen .mcpag-exports::-webkit-scrollbar,
.mcpag-workspace.is-expanded .mcpag-exports::-webkit-scrollbar {
	height: 0;
}

.mcpag-workspace:fullscreen .mcpag-exports .mcpag-btn,
.mcpag-workspace.is-expanded .mcpag-exports .mcpag-btn {
	flex: 0 0 auto;
}

/* Nothing here hides the build options any more: they moved into the tool
   options on the rail, which fullscreen keeps like every other panel. They
   were hidden while they were a third row under the downloads. */

/* Where the settings live while fullscreen has them: over the picture, like
   every other panel that opens on top of it. */
.mcpag-stage-drawer {
	position: absolute;
	/* Under the button that opened it, and only as wide as it needs: a drawer
	   that covered the whole screen would have hidden the picture the settings
	   are about, which is the thing somebody is watching while they change
	   them. */
	inset: 42px 6px auto auto;
	z-index: 30;
	width: min(400px, calc(100% - 12px));
	max-height: calc(100% - 54px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
}

.mcpag-stage-drawer .mcpag-panel {
	margin: 0;
	border: 0;
	box-shadow: none;
	background-image: none;
}

.mcpag-canvas-wrap:fullscreen {
	background-color: var(--mcpag-canvas-bg, #0f172a);
}

.mcpag-canvas-wrap.is-expanded {
	position: fixed;
	inset: 0;
	z-index: 99999;
	border-radius: 0;
}

.mcpag-canvas-wrap:fullscreen,
.mcpag-canvas-wrap.is-expanded {
	max-height: none;
}

.mcpag-canvas {
	display: block;
	/* Never shrunk to fit its flex parent: at high zoom the preview is meant
	   to be bigger than the box and scrolled. */
	flex: 0 0 auto;
	height: auto;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* Empty, the preview is part of the page and a finger on it scrolls the page.
   With a picture in it, it becomes a viewport onto something bigger than
   itself and takes the gestures over: a finger moves the view, two fingers
   zoom. Handing them back to the browser would mean a pinch scrolled the
   article instead of the build. */
.mcpag-canvas-wrap {
	touch-action: pan-x pan-y;
}

.mcpag-canvas-wrap.has-result {
	touch-action: none;
}

/* No scrollbars. The box is a window onto the picture and holds still; two
   bars appearing and disappearing along its edges as the zoom crosses the
   size of the box is the frame drawing attention to itself while the picture
   is what changed. Every way of moving the view — the wheel, a drag, the
   keys — works without them. */
.mcpag-canvas-wrap {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mcpag-canvas-wrap::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* The cursor is the only thing that says what a drag is about to do. */
.mcpag-hand .mcpag-canvas-wrap.has-result {
	cursor: grab;
}

/* A companion tool has nothing to paint with, so a drag on its preview can
   only mean one thing and the cursor can say so without being asked. */
.mcpag-mini .mcpag-canvas-wrap.has-result {
	cursor: grab;
}

.mcpag-canvas-wrap.is-panning,
.mcpag-hand .mcpag-canvas-wrap.is-panning {
	cursor: grabbing;
}

.mcpag-canvas-wrap.is-panning .mcpag-canvas {
	cursor: grabbing;
}

.mcpag-zoom-readout {
	margin: 0;
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}


.mcpag-empty {
	margin: 0;
	color: var(--mcpag-muted, #6b7280);
	text-align: center;
}

.mcpag-tooltip {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	background: var(--mcpag-panel-bg, #ffffff);
	color: var(--mcpag-text, #1f2937);
	font-size: 12px;
	white-space: nowrap;
	border: 1px solid var(--mcpag-border, #e5e7eb);
	border-radius: 4px;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Stats & exports ------------------------------------------------------- */

/* =======================================================================
   The tool rail

   Down the left of the picture rather than in a bar above it. A row above
   the picture is a row the picture pays for, and these are things somebody
   reaches for while looking at the art, so they belong beside it. It floats,
   so it costs the picture nothing but the margin it is centred in.
   ======================================================================= */

.mcpag-stage-frame > .mcpag-toolbar {
	position: absolute;
	inset: 6px auto 6px 6px;
	z-index: 8;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 3px;
	max-height: calc(100% - 12px);
	overflow-y: auto;
	padding: 4px;
	background: color-mix(in srgb, var(--mcpag-panel-bg, #fff) 88%, transparent);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	scrollbar-width: none;
}

.mcpag-stage-frame > .mcpag-toolbar::-webkit-scrollbar {
	width: 0;
}

/* Undo and redo are a pair, and a pair reads as one thing whichever way the
   rail runs. */
.mcpag-stage-frame > .mcpag-toolbar .mcpag-history {
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding-top: 3px;
	border-top: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

/* Room for it, so a picture centred in the box is not centred under it. */
.mcpag-editing .mcpag-canvas-wrap {
	padding-inline-start: 52px;
}

/* What the Options button opens: the brush, and how the build is placed. */
.mcpag-options {
	position: absolute;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(280px, calc(100% - 12px));
	max-height: min(60vh, 380px);
	overflow-y: auto;
	padding: 12px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
}

.mcpag-options .mcpag-tool-size {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcpag-options .mcpag-tool-size .mcpag-range {
	flex: 1 1 auto;
	width: auto;
}

.mcpag-options-build .mcpag-build-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

/* Four numbers about the picture. A row wherever they are put — a drawer on
   a phone, a column in the studio — and an overlay only on the picture
   itself, which is the rule below. Absolute everywhere would mean absolute
   inside the drawer too, where there is nothing to hang off and the numbers
   end up over the drawer's own heading. */
.mcpag-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	line-height: 1.5;
}

/* On the picture: over the top corner, where four numbers cost no height at
   all, and transparent to the pointer so they never come between somebody
   and a block. */
.mcpag-stage-frame > .mcpag-stats {
	position: absolute;
	inset: 6px 6px auto;
	z-index: 6;
	padding: 4px 9px;
	background: color-mix(in srgb, var(--mcpag-panel-bg, #fff) 82%, transparent);
	border-radius: var(--mcpag-btn-radius, 8px);
	font-size: 0.68em;
	pointer-events: none;
}

.mcpag-stat {
	display: flex;
	align-items: baseline;
	gap: 5px;
	white-space: nowrap;
}

.mcpag-stat-label {
	color: var(--mcpag-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mcpag-stat strong {
	color: var(--mcpag-heading, #111827);
	font-variant-numeric: tabular-nums;
}

/* The two things that act on the picture, in its other corner. */
.mcpag-stage-buttons {
	position: absolute;
	inset: 6px 6px auto auto;
	z-index: 7;
	display: flex;
	gap: 4px;
}

.mcpag-stage-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: color-mix(in srgb, var(--mcpag-panel-bg, #fff) 88%, transparent);
	color: var(--mcpag-text, #1f2937);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
}

.mcpag-stage-btn:hover,
.mcpag-stage-btn.is-active {
	background: var(--mcpag-accent, #2563eb);
	color: var(--mcpag-accent-text, #fff);
	border-color: var(--mcpag-accent, #2563eb);
}

/* Over the picture a 28 pixel button is right under a pointer and too small
   under a thumb, and these are the buttons somebody uses while holding the
   phone. Grown on touch and on a narrow screen, in both the main tool and
   the companions, since they are the same button. */
@media (hover: none), (max-width: 560px) {
	.mcpag-stage-btn {
		width: 40px;
		height: 40px;
	}
}

.mcpag-stage-btn:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
}

/* The numbers sit between the rail and the buttons rather than behind
   either. */
.mcpag-stage-frame > .mcpag-stats {
	padding-inline-end: 76px;
}

.mcpag-editing .mcpag-stage-frame > .mcpag-stats {
	inset-inline-start: 58px;
}

/* A button and the menu it opens. The menu itself is moved out to float over
   the picture with the rest of them, so this is only what is left: a wrapper
   that keeps the button in the row. */
.mcpag-menu {
	position: relative;
}

/* Every panel that floats over the picture is capped to the height of what
   it opens inside, so it scrolls rather than running off the bottom of a
   screen that clips it. */
.mcpag-shapes,
.mcpag-frames,
.mcpag-ai,
.mcpag-options,
.mcpag-menu-list,
.mcpag-swatch-panel {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mcpag-menu-list {
	position: absolute;
	z-index: 45;
	display: flex;
	flex-direction: column;
	min-width: 190px;
	padding: 4px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
}

.mcpag-menu-item {
	display: block;
	width: 100%;
	padding: 7px 10px;
	background: transparent;
	color: var(--mcpag-text, #1f2937);
	font-family: inherit;
	font-size: 0.86em;
	text-align: start;
	white-space: nowrap;
	border: 0;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
}

.mcpag-menu-item:hover {
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
}

.mcpag-menu-item:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: -2px;
}

.mcpag-exports {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.mcpag-status {
	margin: 12px 0 0;
	min-height: 1.2em;
	font-size: 0.86em;
}

.mcpag-status-success {
	color: var(--mcpag-success, #059669);
}

.mcpag-status-error {
	color: var(--mcpag-error, #dc2626);
}

/* Tables ---------------------------------------------------------------- */

.mcpag-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88em;
}

.mcpag-table th,
.mcpag-table td {
	padding: 8px 10px;
	text-align: start;
	border-bottom: 1px solid var(--mcpag-border, #e5e7eb);
}

.mcpag-table th {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.86em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mcpag-table tbody tr:hover {
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
}

/* Build guide ----------------------------------------------------------- */

.mcpag-guide-nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mcpag-guide-counter {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.86em;
	white-space: nowrap;
}

.mcpag-guide-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.mcpag-guide-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	border-radius: var(--mcpag-btn-radius, 8px);
	font-size: 0.82em;
}

/* Footer ---------------------------------------------------------------- */

.mcpag-footer {
	margin-top: var(--mcpag-gap, 20px);
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.78em;
	text-align: center;
}

.mcpag-footer p {
	margin: 2px 0;
}

@media (prefers-reduced-motion: reduce) {
	.mcpag-wrap * {
		transition: none !important;
	}
}

/* =======================================================================
   Layout modes
   ======================================================================= */

.mcpag-region {
	display: flex;
	flex-direction: column;
	gap: var(--mcpag-gap, 20px);
	margin-bottom: var(--mcpag-gap, 20px);
}

.mcpag-region-bottom {
	margin-top: var(--mcpag-gap, 20px);
	margin-bottom: 0;
}

/* Sidebar on the right */
.mcpag-side-right .mcpag-body {
	grid-template-columns: minmax(0, 1fr) var(--mcpag-sidebar-width, 330px);
}

.mcpag-side-right .mcpag-sidebar { order: 2; }
.mcpag-side-right .mcpag-main { order: 1; }

/* Keep the canvas in view while the controls scroll.

   `:only-child` is the whole safety net. A sticky panel travels the length of
   its column, sliding over whatever follows it, so it can only stay put when
   there is nothing behind it to cover. With the material list and the build
   guide below the columns — where the default arrangements now put them — the
   result is alone and can stay in view for the full height of the controls.
   Move something back beside it and the stickiness simply stops rather than
   quietly hiding it. */
@media (min-width: 861px) {
	/* The body grid aligns its columns to the top, which leaves the result
	   column exactly as tall as the result — and a sticky element with no room
	   in its container cannot go anywhere. Stretching the column to the height
	   of the row gives it the travel it needs. */
	.mcpag-sticky-result .mcpag-main {
		align-self: stretch;
	}

	.mcpag-sticky-result .mcpag-main > .mcpag-panel-result:only-child {
		flex: 0 0 auto;
		position: sticky;
		top: 12px;
		z-index: 2;
		/* Always reachable: a build taller than the screen scrolls inside the
		   panel rather than hanging off the bottom of it. */
		max-height: calc(100vh - 24px);
		overflow: auto;
	}
}

/* Canvas first: result on top, controls in columns underneath */
.mcpag-mode-columns .mcpag-body {
	grid-template-columns: minmax(0, 1fr);
}

.mcpag-mode-columns .mcpag-sidebar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	align-items: start;
}

.mcpag-mode-columns .mcpag-region-top .mcpag-panel-result {
	margin: 0;
}

/* Studio: a fixed editor window ----------------------------------------
   Tools down the left, the picture in the middle, the open tool's options on
   the right, the everyday settings across the top. The shape only pays off if
   the frame stays the size of the screen: the moment it can grow, the controls
   start pushing the picture out of view again, which is the whole problem it
   exists to solve. So the height is fixed here and every column inside it
   scrolls on its own.
   ----------------------------------------------------------------------- */

.mcpag-mode-studio .mcpag-studio {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	/* Set under Themes & Design; by default as tall as the screen allows. */
	height: var(--mcpag-studio-height, clamp(560px, calc(100vh - 56px), 1200px));
	overflow: hidden;
	background-color: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
}

/* Panels inside the shell are rooms in one window, not cards on a page. */
.mcpag-mode-studio .mcpag-studio .mcpag-panel {
	margin: 0;
	padding: 14px;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* The top bar */

.mcpag-studio-bar {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	padding: 10px 12px;
	overflow-x: auto;
	background-color: var(--mcpag-panel-alt-bg, #f1f3f6);
	border-bottom: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

.mcpag-studio-bar-fields {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

.mcpag-studio-field {
	flex: 0 0 auto;
	margin: 0;
	min-width: 150px;
}

.mcpag-studio-field.mcpag-field-row {
	display: flex;
	gap: 8px;
	min-width: 0;
}

.mcpag-studio-field.mcpag-field-row .mcpag-field {
	margin: 0;
	width: 96px;
}

.mcpag-studio-field .mcpag-label {
	margin-bottom: 3px;
	font-size: 0.76em;
}

.mcpag-studio-field .mcpag-input {
	padding: 7px 10px;
}

.mcpag-studio-field select.mcpag-input {
	padding-inline-end: 32px;
}

/* The three columns */

.mcpag-studio-body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(240px, var(--mcpag-studio-props, 340px));
	min-height: 0;
}

/* The tool rail */

.mcpag-studio-rail {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 86px;
	padding: 8px 6px;
	overflow-y: auto;
	background-color: var(--mcpag-panel-alt-bg, #f1f3f6);
	border-inline-end: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

.mcpag-studio-tool {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 9px 4px;
	background: none;
	border: 0;
	border-radius: var(--mcpag-btn-radius, 8px);
	color: var(--mcpag-text, #1f2937);
	font: inherit;
	font-size: 0.74em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.mcpag-studio-icon {
	flex: 0 0 auto;
	color: var(--mcpag-muted, #6b7280);
}

.mcpag-studio-tool:hover {
	background-color: color-mix(in srgb, var(--mcpag-accent, #2563eb) 12%, transparent);
}

/* Two signals, not one: the tint carries no meaning on its own where colours
   are overridden or hard to tell apart, so the open tool also keeps a bar on
   its leading edge and a heavier label. */
.mcpag-studio-tool.is-active {
	background-color: color-mix(in srgb, var(--mcpag-accent, #2563eb) 16%, transparent);
	box-shadow: inset 3px 0 0 var(--mcpag-accent, #2563eb);
	font-weight: 600;
}

.mcpag-studio-tool.is-active .mcpag-studio-icon {
	color: var(--mcpag-accent, #2563eb);
}

.mcpag-studio-tool:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: -2px;
}

/* The middle */

.mcpag-studio-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: auto;
}

.mcpag-studio-stage > .mcpag-panel,
.mcpag-studio-stage > .mcpag-panel > .mcpag-panel-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

/* The preview takes whatever the rows around it leave, rather than setting the
   height of the window from the size of the build. */
.mcpag-studio-stage .mcpag-canvas-wrap {
	flex: 1 1 auto;
	min-height: 140px;
	max-height: none;
}

/* The picture takes the height the rows around it leave, and every box it
   sits inside has to pass that on rather than shrink to the canvas. */
.mcpag-studio-stage .mcpag-stage-frame,
.mcpag-shell-stage .mcpag-stage-frame,
.mcpag-studio-stage .mcpag-workspace,
.mcpag-shell-stage .mcpag-workspace {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

/* The numbers are on the picture now, and in the studio the picture is the
   whole middle of the window, so they need no help from here. */

.mcpag-studio-stage .mcpag-stat {
	padding: 6px 9px;
}

.mcpag-studio-stage .mcpag-stat strong {
	font-size: 1em;
}

/* The downloads, now a tool of their own on the rail. One button per line: the
   column is narrow, and a half-width button next to a full-width one reads as
   two different kinds of thing. */
.mcpag-studio-export {
	padding: 14px;
}

/* First thing in its own panel now, so the rule that separated it from the
   picture has nothing left to separate. */
.mcpag-studio-export .mcpag-build-options {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mcpag-studio-export .mcpag-build-options .mcpag-field-inline {
	flex: 1 1 100%;
}

.mcpag-studio-export .mcpag-exports {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	margin-top: 14px;
}

/* A column of eleven buttons has to fit the panel, or the download you came
   for is below the fold again. Shorter buttons, one per line: the label is
   what identifies them and it stays full width. */
.mcpag-studio-export .mcpag-exports .mcpag-btn {
	padding-block: 8px;
}

.mcpag-studio-stage.is-dragging {
	outline: 2px dashed var(--mcpag-accent, #2563eb);
	outline-offset: -6px;
}

/* The invitation in the empty middle */

.mcpag-studio-empty {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 26px 30px;
	background: none;
	border: 2px dashed var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	color: var(--mcpag-text, #1f2937);
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.mcpag-studio-empty:hover {
	border-color: var(--mcpag-accent, #2563eb);
}

.mcpag-studio-empty:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 3px;
}

.mcpag-studio-empty-icon {
	color: var(--mcpag-accent, #2563eb);
}

.mcpag-studio-empty-title {
	font-weight: 600;
}

.mcpag-studio-empty-hint {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.86em;
}

/* Both would say the same thing, and the button says it better. */
.mcpag-studio:not(.has-image) .mcpag-empty {
	display: none;
}

/* In the shell the invitation goes the other way. The Image drawer is one tap
   away and already holds a Browse files button, so a second way into the file
   picker sitting on top of the stage is the extra button this layout was
   meant to remove — and the plain line of text says the same thing in the
   width a phone actually has. */
.mcpag-shell-on .mcpag-studio-empty {
	display: none;
}

.mcpag-shell-on .mcpag-canvas-wrap .mcpag-empty {
	display: block;
	max-width: 100%;
	padding: 0 12px;
}

/* The drop zone in a drawer: the instruction stays, because a narrow window
   on a desktop gets this layout too and dropping a file on it still works.
   What goes is the decoration around it — a 34px icon and a line reading
   "or" cost a hundred pixels of a drawer that is only a third of the screen,
   and they cost it to the third button, which is the one somebody coming
   back to a saved build needs. */
.mcpag-shell-on .mcpag-dropzone {
	padding: 12px;
	gap: 8px;
}


.mcpag-shell-on .mcpag-dropzone-icon,
.mcpag-shell-on .mcpag-dropzone-or {
	display: none;
}

/* The options column */

.mcpag-studio-props {
	min-height: 0;
	overflow-y: auto;
	border-inline-start: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

/* On a narrow screen the shell unfolds into an ordinary page: a strip of
   tools, the picture, then the options. A window shorter than a phone keyboard
   helps nobody. */
.mcpag-is-mobile .mcpag-studio {
	height: auto;
	overflow: visible;
}

.mcpag-is-mobile .mcpag-studio-body {
	display: block;
}

.mcpag-is-mobile .mcpag-studio-rail {
	flex-direction: row;
	width: auto;
	overflow-x: auto;
	border-inline-end: 0;
	border-bottom: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

.mcpag-is-mobile .mcpag-studio-tool {
	min-width: 74px;
}

.mcpag-is-mobile .mcpag-studio-tool.is-active {
	box-shadow: inset 0 -3px 0 var(--mcpag-accent, #2563eb);
}

.mcpag-is-mobile .mcpag-studio-stage,
.mcpag-is-mobile .mcpag-studio-props {
	overflow: visible;
}

.mcpag-is-mobile .mcpag-studio-stage .mcpag-canvas-wrap {
	max-height: 60vh;
}

.mcpag-is-mobile .mcpag-studio-props {
	border-inline-start: 0;
	border-top: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

.mcpag-is-mobile .mcpag-studio-bar-fields {
	flex-wrap: wrap;
}

@media (forced-colors: active) {
	.mcpag-studio-tool.is-active {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

/* -----------------------------------------------------------------------
   Collapsible panels
   ----------------------------------------------------------------------- */

.mcpag-panel-toggle {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.mcpag-panel-toggle .mcpag-panel-title {
	margin: 0;
}

/* On its own the toggle owns the whole row, so the entire header is clickable.
   Beside header tools it shrinks to its label and the tools keep the far end. */
.mcpag-panel-head > .mcpag-panel-toggle:only-child {
	flex: 1 1 auto;
	width: 100%;
}

.mcpag-panel-head > .mcpag-panel-toggle:not(:only-child) ~ * {
	margin-inline-start: auto;
}

.mcpag-panel-toggle:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 3px;
}

.mcpag-chevron {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--mcpag-muted, #6b7280);
	transition: transform var(--mcpag-transition, 0.18s ease);
}

.mcpag-collapsible.is-closed .mcpag-chevron {
	transform: rotate(-90deg);
}

.mcpag-rtl .mcpag-collapsible.is-closed .mcpag-chevron {
	transform: rotate(90deg);
}

.mcpag-collapsible .mcpag-panel-head {
	margin-bottom: 0;
}

.mcpag-collapsible.is-open .mcpag-panel-head {
	margin-bottom: 14px;
}

/* -----------------------------------------------------------------------
   Tabbed controls
   ----------------------------------------------------------------------- */

.mcpag-tabbed {
	display: flex;
	flex-direction: column;
	background-color: var(--mcpag-panel-bg, #ffffff);
	background-image: var(--mcpag-panel-texture, none);
	background-size: 16px 16px;
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: var(--mcpag-shadow, none);
	overflow: hidden;
}

.mcpag-tablist {
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	padding: 6px 6px 0;
	overflow-x: auto;
	scrollbar-width: thin;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	border-bottom: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

.mcpag-tab {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	background: transparent;
	color: var(--mcpag-muted, #6b7280);
	font-family: inherit;
	font-size: 0.86em;
	font-weight: 600;
	text-transform: var(--mcpag-btn-transform, none);
	letter-spacing: inherit;
	border: 0;
	border-radius: var(--mcpag-btn-radius, 8px) var(--mcpag-btn-radius, 8px) 0 0;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color var(--mcpag-transition, 0.18s ease), color var(--mcpag-transition, 0.18s ease);
}

.mcpag-tab:hover {
	color: var(--mcpag-text, #1f2937);
}

.mcpag-tab.is-active {
	background: var(--mcpag-panel-bg, #ffffff);
	color: var(--mcpag-heading, #111827);
	box-shadow: inset 0 -3px 0 var(--mcpag-accent, #2563eb);
}

.mcpag-tab:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: -2px;
}

/* Inside a tab the panel is just content: the frame belongs to the tab box. */
.mcpag-tabpanel .mcpag-panel {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* The tab box supplies the frame, so the panel inside only needs padding. */
.mcpag-tabpanel .mcpag-panel-head {
	padding-bottom: 0;
	border-bottom: 0;
}

/* -----------------------------------------------------------------------
   Guided steps
   ----------------------------------------------------------------------- */

.mcpag-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--mcpag-gap, 20px);
}

.mcpag-step {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	color: var(--mcpag-muted, #6b7280);
	font-family: inherit;
	font-size: 0.86em;
	font-weight: 600;
	border: var(--mcpag-border-width, 1px) solid transparent;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
	transition: background-color var(--mcpag-transition, 0.18s ease), color var(--mcpag-transition, 0.18s ease);
}

.mcpag-step:hover { color: var(--mcpag-text, #1f2937); }

.mcpag-step.is-current {
	background: var(--mcpag-panel-bg, #ffffff);
	color: var(--mcpag-heading, #111827);
	border-color: var(--mcpag-accent, #2563eb);
}

.mcpag-step.is-done .mcpag-step-num {
	background: var(--mcpag-accent, #2563eb);
	color: var(--mcpag-btn-text, #ffffff);
}

.mcpag-step:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
}

.mcpag-step-num {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 22px;
	height: 22px;
	background: var(--mcpag-border, #e5e7eb);
	color: var(--mcpag-text, #1f2937);
	font-size: 0.8em;
	border-radius: 50%;
}

.mcpag-step.is-current .mcpag-step-num {
	background: var(--mcpag-accent, #2563eb);
	color: var(--mcpag-btn-text, #ffffff);
}

.mcpag-step-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcpag-wizard {
	display: flex;
	flex-direction: column;
	gap: var(--mcpag-gap, 20px);
}

/* Form fields should not stretch across a full-width step. */
.mcpag-mode-wizard .mcpag-step-panel .mcpag-panel:not(.mcpag-panel-result) .mcpag-panel-content {
	max-width: 760px;
}

.mcpag-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mcpag-step-counter {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.86em;
}

@media (max-width: 620px) {
	.mcpag-step-label { display: none; }
	.mcpag-step { flex: 0 0 auto; }
}

/* -----------------------------------------------------------------------
   Small screens: never make the visitor scroll past the controls
   ----------------------------------------------------------------------- */

@media (max-width: 860px) {
	.mcpag-sticky-result .mcpag-main > .mcpag-panel-result:only-child {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.mcpag-mode-columns .mcpag-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =======================================================================
   Crop, block groups and filters
   ======================================================================= */

.mcpag-cropper {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	touch-action: none;
}

.mcpag-cropper .mcpag-preview-img {
	width: 100%;
	max-height: 260px;
	object-fit: contain;
}

.mcpag-crop-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.mcpag-crop-shade {
	fill: #000;
	fill-opacity: 0.55;
	pointer-events: none;
}

.mcpag-crop-outline {
	fill: transparent;
	stroke: #fff;
	stroke-width: 2;
	stroke-dasharray: 5 5;
	cursor: move;
}

/* Grab zones only: drawing them would put a second rectangle around the crop. */
.mcpag-crop-handle {
	fill: transparent;
	stroke: none;
}

.mcpag-crop-mark {
	fill: #fff;
	stroke: #000;
	stroke-width: 1;
	pointer-events: none;
}

.mcpag-crop-nw, .mcpag-crop-se { cursor: nwse-resize; }
.mcpag-crop-ne, .mcpag-crop-sw { cursor: nesw-resize; }
.mcpag-crop-n, .mcpag-crop-s { cursor: ns-resize; }
.mcpag-crop-w, .mcpag-crop-e { cursor: ew-resize; }

.mcpag-preview-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mcpag-blocks-total {
	margin: 0 0 10px;
	color: var(--mcpag-heading, #111827);
	font-size: 0.9em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.mcpag-notice {
	margin: 0 0 12px;
	padding: 8px 10px;
	border-radius: var(--mcpag-btn-radius, 8px);
	font-size: 0.82em;
}

/* The tint under the text eats most of the error colour's contrast, so the
   text is pulled toward the theme's own text colour: darker on a light theme,
   lighter on a dark one, whatever error colour the admin picked. */
.mcpag-notice-warn {
	background: color-mix(in srgb, var(--mcpag-error, #dc2626) 14%, transparent);
	color: color-mix(in srgb, var(--mcpag-error, #dc2626) 75%, var(--mcpag-text, #1f2937));
}

/* The height warning carries an offer, so it needs room for the answer. */
.mcpag-height-notice {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
}

.mcpag-height-message {
	flex: 1 1 200px;
	margin: 0;
}

.mcpag-height-notice .mcpag-btn {
	flex: 0 0 auto;
}

/* Block group presets ---------------------------------------------------- */

.mcpag-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 6px;
	margin-bottom: 12px;
}

.mcpag-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 10px;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	border: var(--mcpag-border-width, 1px) solid transparent;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
	transition: border-color var(--mcpag-transition, 0.18s ease), background-color var(--mcpag-transition, 0.18s ease);
}

.mcpag-group:hover { border-color: var(--mcpag-border, #e5e7eb); }

.mcpag-group.is-active {
	background: var(--mcpag-panel-bg, #fff);
	border-color: var(--mcpag-accent, #2563eb);
}

.mcpag-group input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mcpag-group:focus-within {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
}

.mcpag-group-title {
	color: var(--mcpag-heading, #111827);
	font-size: 0.9em;
	font-weight: 600;
}

.mcpag-group-desc {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.74em;
	line-height: 1.35;
}

/* Property include filters ----------------------------------------------- */

.mcpag-includes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px 12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mcpag-border, #e5e7eb);
}

.mcpag-includes .mcpag-check {
	margin-bottom: 4px;
	font-size: 0.84em;
}

/* Palette toolbar --------------------------------------------------------- */

.mcpag-palette-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.mcpag-block-search {
	flex: 1 1 140px;
	min-width: 0;
	padding: 6px 9px;
	font-size: 0.86em;
}

.mcpag-palette-toolbar .mcpag-palette-actions {
	margin-bottom: 0;
}

.mcpag-master {
	font-size: 0.82em;
}

/* A block the version or property filters rule out stays visible but inert,
   so it is obvious why it cannot be picked. */
.mcpag-swatch.is-unavailable {
	opacity: 0.38;
	cursor: not-allowed;
}

.mcpag-swatch.is-unavailable .mcpag-swatch-chip {
	filter: grayscale(1);
}

/* =======================================================================
   Editor
   ======================================================================= */

.mcpag-editor {
	display: flex;
	flex-direction: column;
	/* Two tight rows rather than three loose ones. Everything above the
	   picture is height the picture does not get, and on a desktop the
	   picture is the thing on the page worth the most room. */
	gap: 6px;
	margin-bottom: 10px;
	padding: 7px 8px;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
}

.mcpag-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.mcpag-tool {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	/* A glyph in a box, sized for a pointer. These were sized for a thumb
	   before they lost their words, and a row of twelve thumb-sized glyphs
	   above the picture is a row and a half of height for twelve things you
	   aim at with a mouse. The phone rules below put the size back where a
	   thumb is what is doing the aiming. */
	padding: 5px 6px;
	background: var(--mcpag-panel-bg, #fff);
	color: var(--mcpag-text, #1f2937);
	font-family: inherit;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: var(--mcpag-btn-transform, none);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
	transition: background-color var(--mcpag-transition, 0.18s ease), border-color var(--mcpag-transition, 0.18s ease);
}

.mcpag-tool[disabled] {
	opacity: 0.45;
	cursor: default;
}

.mcpag-tool-icon {
	flex: 0 0 auto;
	display: block;
	/* Drawn at 18 in the markup so a phone still gets 18; a pointer does not
	   need it and the row is shorter without it. */
	width: 16px;
	height: 16px;
}

.mcpag-is-mobile .mcpag-tool-icon {
	width: 18px;
	height: 18px;
}

/* A glyph and nothing else, everywhere.

   Twelve words on one row is a row nobody reads and a row that wraps to
   three; twelve glyphs is one line and half the height, and the height it
   gives back goes to the picture. Nothing is lost: every one of these
   buttons already carries its word as its accessible name, and the
   stylesheet draws that word as a tooltip the moment a pointer rests on it
   or the keyboard reaches it. */
.mcpag-tool-label {
	display: none;
}

.mcpag-tool {
	min-width: 30px;
	min-height: 30px;
	padding: 0 5px;
	justify-content: center;
}

/* Back to a thumb's size where a thumb is doing the aiming. The big-targets
   setting raises it further for anyone who asked for that.

   The mobile class comes from the full tool's own script; a companion tool
   has no such thing, so it goes by the screen and the pointer instead. */
.mcpag-is-mobile .mcpag-tool {
	min-width: 38px;
	min-height: 38px;
	padding: 0 9px;
}

@media (hover: none), (max-width: 560px) {
	.mcpag-mini .mcpag-tool {
		min-width: 38px;
		min-height: 38px;
		padding: 0 9px;
	}
}

/* -----------------------------------------------------------------------
   Tooltips

   Drawn rather than left to the browser: the native one waits about a second
   before it appears, which is a second of not knowing what a glyph does, and
   it cannot be styled to match the theme around it.

   One element for the page, fixed to the window and placed by tips.js. It
   was a ::after on the button until the tools moved onto the picture, and a
   pseudo-element cannot leave the box it is drawn in: the rail scrolls, so
   every label was drawn just outside it and clipped away to nothing. Fixed
   to the window it is outside every scrolling row, every clipped frame, and
   the one subtree fullscreen draws.

   The text is the button's own accessible name, so there is one string to
   translate and no second copy to keep in step.
   ----------------------------------------------------------------------- */

.mcpag-tip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483000;
	box-sizing: border-box;
	max-width: 260px;
	padding: 4px 8px;
	/* On the body rather than inside the tool, so the theme's custom
	   properties do not reach it: tips.js reads the three it needs off the
	   button being named and writes them on. These are what a theme that
	   sets none of them gets. */
	background: #111827;
	color: #ffffff;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	text-shadow: none;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
	pointer-events: none;
}

.mcpag-tip[hidden] {
	display: none;
}

/* -----------------------------------------------------------------------
   The view switches

   Real checkboxes wearing a glyph. The box is stretched over the whole
   control and made transparent, so a click anywhere on the glyph is a click
   on it and focus and the keyboard work as they always did; what is drawn is
   the box beside it.
   ----------------------------------------------------------------------- */

.mcpag-toggle {
	/* What the stretched checkbox below is stretched over. */
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}

.mcpag-toggle input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

.mcpag-toggle-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--mcpag-panel-bg, #ffffff);
	color: var(--mcpag-muted, #6b7280);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-btn-radius, 8px);
	transition: background-color var(--mcpag-transition, 0.18s ease), color var(--mcpag-transition, 0.18s ease), border-color var(--mcpag-transition, 0.18s ease);
}

.mcpag-toggle:hover .mcpag-toggle-box {
	border-color: var(--mcpag-accent, #2563eb);
	color: var(--mcpag-text, #1f2937);
}

.mcpag-toggle input:checked + .mcpag-toggle-box {
	background: var(--mcpag-btn-bg, #2563eb);
	color: var(--mcpag-btn-text, #ffffff);
	border-color: var(--mcpag-btn-bg, #2563eb);
}

.mcpag-toggle input:focus-visible + .mcpag-toggle-box {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
}

.mcpag-tool:hover { border-color: var(--mcpag-accent, #2563eb); }

.mcpag-tool.is-active {
	background: var(--mcpag-btn-bg, #2563eb);
	color: var(--mcpag-btn-text, #fff);
	border-color: var(--mcpag-btn-bg, #2563eb);
}

.mcpag-tool:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
}

.mcpag-tool-size {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8em;
	color: var(--mcpag-muted, #6b7280);
}

.mcpag-tool-size .mcpag-range {
	width: 90px;
	margin: 0;
}

.mcpag-history {
	display: flex;
	gap: 6px;
	margin-inline-start: auto;
}

/* One row: what is being painted with, the blocks in the build, and the way
   to the rest of them. */
.mcpag-palette-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.mcpag-active-block {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 40%;
	font-size: 0.8em;
}

.mcpag-active-block .mcpag-label { margin: 0; }

.mcpag-active-chip {
	flex: 0 0 auto;
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid var(--mcpag-border, #e5e7eb);
	border-radius: 3px;
}

.mcpag-active-name {
	overflow: hidden;
	color: var(--mcpag-heading, #111827);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* One line that never wraps: a second line of swatches is a second line of
   height, and the ones that do not fit are behind the button after it. */
.mcpag-swatch-strip {
	flex: 1 1 auto;
	display: flex;
	gap: 3px;
	min-width: 0;
	overflow: hidden;
}

/* The rest of the blocks, over the picture rather than under the row. */
.mcpag-swatch-panel {
	position: absolute;
	z-index: 40;
	width: min(280px, calc(100% - 12px));
	max-height: 220px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 7px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
}

.mcpag-swatch-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
	gap: 4px;
}

.mcpag-swatch-list .mcpag-strip-swatch {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
}

.mcpag-swatch-more {
	flex: 0 0 auto;
	min-width: 34px;
	padding: 4px 7px;
	font-variant-numeric: tabular-nums;
}

.mcpag-strip-swatch {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.mcpag-strip-swatch.is-active {
	border-color: var(--mcpag-accent, #2563eb);
}

.mcpag-strip-swatch:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 1px;
}

/* While editing, the canvas is a drawing surface rather than a picture. */
.mcpag-editing .mcpag-canvas {
	cursor: crosshair;
	touch-action: none;
}

.mcpag-build-options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--mcpag-border, #e5e7eb);
}

.mcpag-field-inline {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 150px;
}

.mcpag-field-inline .mcpag-label { margin: 0; }
.mcpag-build-options .mcpag-hint { flex: 1 1 100%; margin: 0; }

/* =======================================================================
   Accessibility
   ======================================================================= */

/* Visible to screen readers, not on screen. */
.mcpag-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mcpag-noscript {
	margin: 0 0 var(--mcpag-gap, 20px);
	padding: 14px 16px;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	border-inline-start: 4px solid var(--mcpag-accent, #2563eb);
	border-radius: var(--mcpag-btn-radius, 8px);
	color: var(--mcpag-text, #1f2937);
}

.mcpag-help-link a {
	color: var(--mcpag-accent, #2563eb);
	text-decoration: underline;
}

.mcpag-help-link a:hover {
	text-decoration: none;
}

/* One visible focus treatment for everything that takes focus, so keyboard
   users never lose their place. */
.mcpag-wrap :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
	border-radius: 2px;
}

.mcpag-crop-outline:focus-visible {
	outline: none;
	stroke: var(--mcpag-accent, #2563eb);
	stroke-width: 3;
	stroke-dasharray: none;
}

@media (forced-colors: active) {
	.mcpag-tool.is-active,
	.mcpag-tab.is-active,
	.mcpag-step.is-current {
		forced-color-adjust: none;
		border: 2px solid Highlight;
	}
}

/* =======================================================================
   Arriving from a link

   A link to #generate-button lands on the button. The ring says which one it
   meant, then gets out of the way — it is an answer to a question the visitor
   already asked, not a nag.
   ======================================================================= */

/* A stand-in id for a control that already answers to one of its own, so a
   plain browser jump lands beside it. Takes no space and says nothing. */
.mcpag-anchor-marker {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

@keyframes mcpag-linked {
	0%, 100% { box-shadow: 0 0 0 3px var(--mcpag-attention-shadow); }
	50% { box-shadow: 0 0 0 7px var(--mcpag-attention-shadow); }
}

.mcpag-linked {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--mcpag-attention, #f7630c);
	outline-offset: 3px;
	border-radius: 2px;
	animation: mcpag-linked 1.1s ease-in-out 3;
}

/* A panel is a big target; a ring around the whole thing reads better than one
   that hugs its text. */
.mcpag-panel.mcpag-linked {
	outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mcpag-linked {
		animation: none;
		box-shadow: 0 0 0 4px var(--mcpag-attention-shadow);
	}
}

/* =======================================================================
   Attention animations
   Draws the eye to the one control that matters right now.
   ======================================================================= */

.mcpag-attention {
	position: relative;
	z-index: 1;
}

/* Pulse — a gentle heartbeat on the button itself */
@keyframes mcpag-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}
.mcpag-anim-pulse .mcpag-attention {
	animation: mcpag-pulse 1.4s ease-in-out var(--mcpag-attention-repeat, 4);
}

/* Glow — a soft halo that breathes */
@keyframes mcpag-glow {
	0%, 100% { box-shadow: 0 0 0 0 var(--mcpag-attention-shadow); }
	50% { box-shadow: 0 0 0 8px transparent, 0 0 18px 2px var(--mcpag-attention-shadow); }
}
.mcpag-anim-glow .mcpag-attention {
	animation: mcpag-glow 1.6s ease-in-out var(--mcpag-attention-repeat, 4);
}

/* Ring — an expanding halo, drawn on a pseudo element so the button
   itself never moves and the layout stays put */
@keyframes mcpag-ring {
	0% { opacity: 0.9; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.35); }
}
.mcpag-anim-ring .mcpag-attention::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--mcpag-attention);
	border-radius: inherit;
	pointer-events: none;
	animation: mcpag-ring 1.5s ease-out var(--mcpag-attention-repeat, 4);
}

/* Bounce — a short hop */
@keyframes mcpag-bounce {
	0%, 20%, 55%, 100% { transform: translateY(0); }
	35% { transform: translateY(-8px); }
	65% { transform: translateY(-4px); }
}
.mcpag-anim-bounce .mcpag-attention {
	animation: mcpag-bounce 1.6s ease-in-out var(--mcpag-attention-repeat, 4);
}

/* Wiggle — a quick side to side nudge */
@keyframes mcpag-wiggle {
	0%, 100% { transform: translateX(0); }
	15%, 45% { transform: translateX(-5px); }
	30%, 60% { transform: translateX(5px); }
	75% { transform: translateX(0); }
}
.mcpag-anim-wiggle .mcpag-attention {
	animation: mcpag-wiggle 1.5s ease-in-out var(--mcpag-attention-repeat, 4);
}

/* Shimmer — a light sweep across the face of the button */
@keyframes mcpag-shimmer {
	0% { transform: translateX(-120%); }
	60%, 100% { transform: translateX(220%); }
}
.mcpag-anim-shimmer .mcpag-attention {
	overflow: hidden;
}
.mcpag-anim-shimmer .mcpag-attention::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	pointer-events: none;
	animation: mcpag-shimmer 2s ease-in-out var(--mcpag-attention-repeat, 4);
}

/* Outline — a flashing focus-style ring, the quietest option */
@keyframes mcpag-outline {
	0%, 100% { outline-color: transparent; }
	50% { outline-color: var(--mcpag-attention); }
}
.mcpag-anim-outline .mcpag-attention {
	outline: 3px solid transparent;
	outline-offset: 3px;
	animation: mcpag-outline 1.3s ease-in-out var(--mcpag-attention-repeat, 4);
}

/* Float — a slow hover, the most restrained of the movement styles */
@keyframes mcpag-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
.mcpag-anim-float .mcpag-attention {
	animation: mcpag-float 2.2s ease-in-out var(--mcpag-attention-repeat, 4);
}

/* Movement is the part that causes trouble for motion sensitivity, so it is
   swapped for a static ring rather than dropped entirely: the hint survives,
   the motion does not. */
@media (prefers-reduced-motion: reduce) {
	.mcpag-attention,
	.mcpag-attention::after {
		animation: none !important;
		transform: none !important;
	}

	.mcpag-attention {
		outline: 3px solid var(--mcpag-attention) !important;
		outline-offset: 3px;
	}
}

/* =======================================================================
   Mobile presentation

   The tool has a lot of controls, and all of them at once on a 390px screen
   is the fastest way to lose a visitor. Below the configured breakpoint the
   script adds .mcpag-is-mobile, which folds the panels down to one job at a
   time and pins the next action to the bottom of the screen.
   ======================================================================= */

/* One column, whatever the desktop layout mode was. */
.mcpag-is-mobile .mcpag-body,
.mcpag-is-mobile .mcpag-sidebar,
.mcpag-is-mobile.mcpag-mode-columns .mcpag-sidebar,
.mcpag-is-mobile.mcpag-layout-stacked .mcpag-sidebar {
	display: flex;
	flex-direction: column;
	grid-template-columns: minmax(0, 1fr);
}

.mcpag-is-mobile .mcpag-panel {
	padding: clamp(12px, 4vw, var(--mcpag-panel-padding, 22px));
}

.mcpag-is-mobile .mcpag-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* Tab strips and step rails scroll sideways instead of wrapping into a
   three-line block that pushes the panel off screen. */
.mcpag-is-mobile .mcpag-tablist,
.mcpag-is-mobile .mcpag-steps {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.mcpag-is-mobile .mcpag-tab,
.mcpag-is-mobile .mcpag-step {
	flex: 0 0 auto;
}

/* A control you can hit with a thumb. 44px is the smallest target size
   WCAG 2.5.5 accepts, so that is the floor rather than the aspiration. */
.mcpag-is-mobile.mcpag-big-targets :is(.mcpag-btn, .mcpag-input, .mcpag-select, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) {
	min-height: 44px;
}

.mcpag-is-mobile.mcpag-big-targets .mcpag-btn-small {
	min-height: 38px;
}

.mcpag-is-mobile.mcpag-big-targets :is(.mcpag-check, .mcpag-swatch) {
	min-height: 40px;
}

.mcpag-is-mobile.mcpag-big-targets .mcpag-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
}

.mcpag-is-mobile.mcpag-big-targets .mcpag-panel-toggle {
	min-height: 44px;
}

/* Rows of buttons become a grid rather than a stack.

   One full-width button per line is a lot of scrolling for eleven downloads,
   and none of these labels needs three hundred pixels to be readable. The
   track floor is whichever is larger of 150px and a third of the row, so a
   phone gets two across, a wider screen gets three, and nothing past three —
   at four the labels start wrapping to three lines and the row is taller than
   the stack it replaced. */
.mcpag-is-mobile :is(.mcpag-exports, .mcpag-preview-actions, .mcpag-actions, .mcpag-start-actions) {
	display: grid;
	/* The floor is what decides how many fit: 130px is the narrowest a
	   two-word label stays readable at, and it is low enough that a row
	   inside a padded drop zone on a 390px phone still takes two. */
	grid-template-columns: repeat(auto-fit, minmax(max(130px, 30%), 1fr));
	gap: 8px;
	align-items: stretch;
}

.mcpag-is-mobile :is(.mcpag-exports, .mcpag-preview-actions, .mcpag-actions, .mcpag-start-actions) > * {
	/* A grid item's minimum is the width of its content unless told
	   otherwise, and one long label would otherwise widen every column. */
	min-width: 0;
	width: auto;
	margin: 0;
}

/* A menu is a wrapper around one button, and in a grid the wrapper is the
   cell: without this the button sits at its own width in a cell sized for
   the longest label in the row. */
.mcpag-is-mobile .mcpag-exports .mcpag-menu {
	display: flex;
}

.mcpag-is-mobile .mcpag-exports .mcpag-menu > .mcpag-btn {
	flex: 1 1 auto;
}

.mcpag-is-mobile :is(.mcpag-exports, .mcpag-preview-actions, .mcpag-actions, .mcpag-start-actions) .mcpag-btn {
	justify-content: center;
	/* Side padding sized for a label that has half the row, and vertical
	   padding cut back to the touch target, which the 44px floor already
	   guarantees. A label that wraps to two lines then costs one extra line,
	   not a whole button's worth of air above and below it. */
	padding: 8px 10px;
	min-height: 44px;
	text-align: center;
	overflow-wrap: break-word;
}

/* The source image column shrinks to its contents on a desktop, which is
   right for a thumbnail and wrong for the row of buttons under it: a grid
   inside a shrink-to-fit box has no width to divide, so it falls back to one
   column. Stretched, the row has the panel to work with. */
.mcpag-is-mobile .mcpag-preview {
	align-items: stretch;
}

/* Same again inside the drop zone, which centres its contents: a grid given
   no width to divide falls back to one column, which is the stack this is
   meant to replace. The zone's own padding comes down too — twenty-two
   pixels a side is forty-four fewer for the buttons inside it. */
.mcpag-is-mobile .mcpag-start-actions {
	align-self: stretch;
}

.mcpag-is-mobile .mcpag-dropzone {
	padding: 16px 12px;
}

/* The three presets carry a sentence of explanation each, which is worth the
   room on a desktop and costs a whole screen on a phone — the drawer opens
   on the explanations and the blocks themselves are below the fold. The
   words stay for a screen reader, positioned against their own label so a
   row that scrolls sideways cannot drag them off the page. */
.mcpag-is-mobile .mcpag-group {
	position: relative;
}

.mcpag-is-mobile .mcpag-group-desc {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Two lines rather than one: a search box sharing a row with Select all and
   Clear all leaves each of the three too narrow to read. The field takes the
   first line and the two controls the second. */
.mcpag-is-mobile .mcpag-block-search {
	flex: 1 1 100%;
}

/* The URL field and its button share a line: the field takes what is left
   after the button, which is the shape the row has on a desktop anyway. */
.mcpag-is-mobile .mcpag-url-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

/* Four numbers, four short lines. Stacked label-over-value they are tall
   enough to fill a drawer on their own, which pushes the downloads the
   drawer is named after off the bottom of it. */
.mcpag-is-mobile .mcpag-shell-pane .mcpag-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(140px, 30%), 1fr));
	gap: 6px;
}

.mcpag-is-mobile .mcpag-stat {
	flex-direction: row;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	padding: 6px 10px;
}

.mcpag-is-mobile .mcpag-stat-label {
	font-size: 0.72em;
}

/* -----------------------------------------------------------------------
   The action bar

   Sticky rather than fixed: it belongs to this tool, so it rides along with
   the tool instead of covering the rest of the page, and two generators on
   one page never fight over the bottom of the viewport.
   ----------------------------------------------------------------------- */

.mcpag-action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	gap: 10px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--mcpag-panel-bg, #ffffff);
	border-top: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.12);
	font-family: var(--mcpag-font, sans-serif);
	font-size: var(--mcpag-font-size, 15px);
}

/* Room for the bar, so the last panel and the footer are still reachable
   rather than sitting permanently underneath it. */
.mcpag-is-mobile {
	padding-bottom: 78px;
}

.mcpag-action-bar .mcpag-btn {
	flex: 1 1 auto;
	min-height: 46px;
	justify-content: center;
}

.mcpag-action-bar .mcpag-action-result {
	flex: 0 1 auto;
}

/* Nothing to point at yet: an action bar with no usable action is worse
   than no bar, so the script hides it rather than showing a dead button.
   The same applies once the visitor has scrolled the tool off screen — a bar
   floating over the rest of the page belongs to nothing. */
.mcpag-action-bar[hidden] {
	display: none;
}

/* =======================================================================
   Companion tools

   One panel, one job, on a page of its own. They borrow the main tool's
   panel, button and canvas styling so a site does not end up looking like
   two different products.
   ======================================================================= */

.mcpag-mini .mcpag-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mcpag-mini-title {
	margin: 0;
	color: var(--mcpag-heading, #111827);
	font-size: var(--mcpag-panel-title-size, 17px);
	font-weight: var(--mcpag-font-weight, 600);
}

.mcpag-mini-tagline {
	margin: -8px 0 0;
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.9em;
}

.mcpag-mini-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: flex-end;
}

.mcpag-mini-fields .mcpag-field-inline {
	flex: 1 1 150px;
	min-width: 140px;
}

.mcpag-mini-fields .mcpag-check {
	margin-bottom: 0;
}

/* The size, its slider and the quick picks are one control, so they are one
   block: a slider that wraps away from the number it moves reads as a second
   setting rather than another way to change the first. It takes the whole row
   because the numbers beside it are one line tall and this one is three. */
.mcpag-mini-size-field {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* The row rule above gives every field a 150px basis, which is a width in a
   row and a height in this column — so the number sat 150px above its own
   slider. In here a field is as tall as what is in it. */
.mcpag-mini-size-field .mcpag-field-inline {
	flex: 0 0 auto;
	min-width: 0;
}

.mcpag-mini-size-range {
	width: 100%;
}

/* The label over the numbers rather than in front of them: in front, the
   first row held five and the second held three, and a row of quick picks
   that does not line up reads as two different things. */
.mcpag-mini-presets {
	display: grid;
	gap: 4px 5px;
	/* Four across, so eight quick picks are two full rows rather than a row
	   of seven and one on its own. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mcpag-mini-preset-label {
	grid-column: 1 / -1;
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.78em;
}

/* Square-ish, because they are numbers rather than words and a row of them
   reads as a scale. */
.mcpag-mini-preset {
	min-width: 0;
	padding-inline: 4px;
	text-align: center;
}

/* The block being painted with, the blocks in the picture, and a brush size
   where the tool has one. The main tool's own row, so it inherits its look
   rather than growing a second one that drifts. */
.mcpag-mini .mcpag-palette-row {
	margin-bottom: 8px;
}

/* -----------------------------------------------------------------------
   Under the picture: how big it is drawn, and how far through it you are
   ----------------------------------------------------------------------- */

.mcpag-mini-viewbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}

.mcpag-mini-zoom {
	display: flex;
	flex: 1 1 190px;
	gap: 8px;
	align-items: center;
	min-width: 170px;
	margin: 0;
}

.mcpag-mini-zoom .mcpag-range {
	flex: 1 1 auto;
	min-width: 0;
}

.mcpag-mini-zoom-value {
	min-width: 3ch;
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.mcpag-mini-progress {
	display: flex;
	gap: 8px;
	align-items: center;
}

.mcpag-mini-progress-count {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------
   The measurements

   Under the picture rather than over it: these are read once, when somebody
   is deciding whether this is the size they want, so they can afford a row
   of their own. The four numbers on the picture stay where they are.
   ----------------------------------------------------------------------- */

.mcpag-mini-measure {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
}

.mcpag-mini-measure-grid {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.mcpag-mini-measure-cell {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mcpag-mini-measure-label {
	color: var(--mcpag-muted, #6b7280);
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mcpag-mini-measure-cell strong {
	font-size: 1.05em;
	font-variant-numeric: tabular-nums;
}

/* =======================================================================
   The companion tools' stage

   The same box the full generator has, for the same reasons: the numbers
   float over the picture rather than taking a row under it, the buttons
   that act on the picture are in its corner, and the whole thing goes
   fullscreen as one piece. Somebody arriving here from the main tool
   should not have to learn a second set of manners.
   ======================================================================= */

/* -----------------------------------------------------------------------
   Two columns, where there are two columns' worth of room

   The picture takes the space and the controls sit beside it in a column as
   narrow as they need. Stacked full-width, every one of these tools pushed
   its own picture below the fold behind a run of one-per-row fields.

   Grid rather than flex, so the columns are the widths asked for rather than
   the widths the contents happen to want: a preview does not get to be
   narrow because the build in it is small.
   ----------------------------------------------------------------------- */

.mcpag-mini-layout {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 780px) {
	.mcpag-mini-layout {
		/* The picture first, the controls after it: what somebody came for
		   is what should be under their eyes when the page arrives. */
		grid-template-columns: minmax(0, 1fr) 260px;
	}

	.mcpag-mini-controls {
		order: 2;
		position: sticky;
		top: 12px;
	}

	.mcpag-mini-stage {
		order: 1;
		min-width: 0;
	}
}

@media (min-width: 1040px) {
	.mcpag-mini-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

.mcpag-mini-controls,
.mcpag-mini-stage {
	min-width: 0;
}

/* In a column of their own the fields are one per row, which is what they
   always wanted: a Shape select stretched across a whole panel was only ever
   wide because there was nothing beside it. */
@media (min-width: 780px) {
	.mcpag-mini-controls .mcpag-mini-fields {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.mcpag-mini-controls .mcpag-mini-fields .mcpag-field-inline {
		flex: 0 0 auto;
		min-width: 0;
	}

	/* The dropzone is a target for a file, and a narrow column is a poor
	   target — but a short one beside the picture beats a tall one above it. */
	.mcpag-mini-controls .mcpag-dropzone {
		padding: 14px 12px;
	}
}

/* A working area rather than a thumbnail, the way the main preview is.

   A definite height rather than a range: the box is what the picture scrolls
   inside, so it has no business changing size when the picture does. With a
   min and a max it grew and shrank with every notch of the zoom, which moved
   everything under it up and down the page while somebody was trying to look
   closer at one block. */
.mcpag-mini .mcpag-canvas-wrap {
	height: clamp(300px, 58vh, 560px);
	min-height: 0;
	max-height: none;
}

/* The rail is as tall as the tools in it.

   Stretched top to bottom of the frame it was a tall empty box beside a
   picture, with two hundred pixels of nothing under the last button — the
   full tool fills that height with more tools, and a companion tool does
   not. It still scrolls if a short picture leaves it no room. */
.mcpag-mini .mcpag-stage-frame > .mcpag-toolbar {
	bottom: auto;
	max-height: calc(100% - 12px);
}

/* Fullscreen is a different question: there the box is the screen. */
.mcpag-mini .mcpag-workspace:fullscreen .mcpag-canvas-wrap,
.mcpag-mini .mcpag-workspace.is-expanded .mcpag-canvas-wrap {
	height: auto;
	flex: 1 1 auto;
}

/* -----------------------------------------------------------------------
   On a phone, the tools go under the picture

   A rail beside the art is right where there is a margin to put it in. On a
   390 pixel screen there is not: the rail measured a quarter of the width,
   floated over the picture, and still only showed six of its nine tools with
   undo and redo scrolled out of reach below them.

   So it does what the full tool's does — becomes one row that scrolls
   sideways, under the picture, where a thumb already is. Same buttons, same
   order, same names; a different place to put a hand.
   ----------------------------------------------------------------------- */

@media (max-width: 779px) {
	.mcpag-mini .mcpag-stage-frame {
		display: flex;
		flex-direction: column;
	}

	.mcpag-mini .mcpag-stage-frame > .mcpag-toolbar {
		position: static;
		order: 3;
		flex-direction: row;
		flex-wrap: nowrap;
		max-height: none;
		margin-top: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.mcpag-mini .mcpag-stage-frame > .mcpag-toolbar > * {
		flex: 0 0 auto;
	}

	/* Undo and redo are a pair, and a pair reads as one thing whichever way
	   the row runs. Beside the tools rather than under them, now. */
	.mcpag-mini .mcpag-stage-frame > .mcpag-toolbar .mcpag-history,
	.mcpag-mini .mcpag-stage-frame > .mcpag-toolbar .mcpag-tool-group {
		flex-direction: row;
		gap: 3px;
		margin: 0;
		padding-top: 0;
		padding-inline-start: 3px;
		border-top: 0;
		border-inline-start: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	}

	/* No rail beside the picture any more, so it gets that room back. */
	.mcpag-mini .mcpag-canvas-wrap {
		order: 1;
		padding-inline-start: 0;
		height: clamp(240px, 46vh, 420px);
	}

	/* A thumb, not a pointer. */
	.mcpag-mini .mcpag-stage-frame > .mcpag-toolbar .mcpag-tool {
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		justify-content: center;
	}

	/* The numbers and the buttons that act on the picture share its top
	   corner, and on a narrow screen they were sitting on top of each other.
	   The numbers give way and go under the picture: a button has to be
	   hittable, and a size reads just as well a line lower. */
	.mcpag-mini .mcpag-stage-frame > .mcpag-stats {
		position: static;
		order: 2;
		max-width: none;
		margin: 6px 2px 0;
		background: none;
		padding: 0;
	}
}

.mcpag-mini-brush {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
}

.mcpag-mini-brush .mcpag-input {
	width: 4.5em;
}

/* A tool that marks the picture says so under the pointer, the way the main
   tool's canvas does. */
.mcpag-mini .mcpag-canvas-wrap.is-painting {
	cursor: crosshair;
}

.mcpag-mini .mcpag-canvas-wrap.is-painting.is-panning {
	cursor: crosshair;
}


/* Stepping through the layers is the thing somebody does most while looking
   at a shape, so it is on the picture and in reach rather than in a row
   above it that scrolls away. */
.mcpag-stage-layers {
	position: absolute;
	inset: auto 0 8px;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}

.mcpag-stage-layers > * {
	pointer-events: auto;
}

/* =======================================================================
   The 3D panel

   Over the picture rather than beside it, filling the workspace: a build
   with three sides needs the room, and what it is covering is the same
   build with one side. It is a child of the workspace like every other
   panel, so fullscreen takes it too.
   ======================================================================= */

.mcpag-three {
	position: absolute;
	inset: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	background: var(--mcpag-panel-bg, #ffffff);
	border-radius: var(--mcpag-radius, 12px);
}

.mcpag-three-frame {
	position: relative;
	flex: 1 1 auto;
	min-height: 160px;
	overflow: hidden;
	background: var(--mcpag-canvas-bg, transparent);
	border-radius: var(--mcpag-radius, 12px);
}

.mcpag-three-canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: grab;
}

.mcpag-three-canvas:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: -2px;
}

/* The rail inside the panel, the same shape as the one on the flat canvas. */
.mcpag-three-frame > .mcpag-toolbar {
	position: absolute;
	inset: 6px auto 6px 6px;
	z-index: 8;
	display: flex;
	/* One column that scrolls, never two: the base toolbar wraps because it
	   used to be a row, and a rail that wraps is a rail twice as wide as the
	   margin it was meant to live in. */
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 3px;
	align-items: center;
	padding: 4px;
	background: color-mix(in srgb, var(--mcpag-panel-bg, #fff) 88%, transparent);
	border-radius: var(--mcpag-btn-radius, 8px);
	overflow-y: auto;
	scrollbar-width: none;
}

.mcpag-three-frame > .mcpag-toolbar::-webkit-scrollbar {
	width: 0;
}

.mcpag-three-frame > .mcpag-stats {
	position: absolute;
	inset: 6px 6px auto 58px;
	z-index: 6;
	padding: 4px 9px;
	background: color-mix(in srgb, var(--mcpag-panel-bg, #fff) 82%, transparent);
	border-radius: var(--mcpag-btn-radius, 8px);
	font-size: 0.68em;
	pointer-events: none;
}

/* Everything under the picture: how deep a flat build is made, and the ways
   of taking it away. One row that scrolls rather than three that stack. */
.mcpag-three-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.mcpag-three-bar::-webkit-scrollbar {
	height: 0;
}

.mcpag-three-bar > * {
	flex: 0 0 auto;
}

.mcpag-three-deep {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.mcpag-three-deep .mcpag-input {
	width: 72px;
}

.mcpag-three-hint {
	margin: 0;
}

/* On a phone the panel is the screen, so the hint under it is a line that
   would push the picture off the top. */
@media (hover: none), (max-width: 560px) {
	.mcpag-three-hint {
		display: none;
	}
}

/* The 3D build fills its box rather than being sized by the picture in it:
   what is in it turns, and a build is as wide as its diagonal from some
   angles and as wide as one side from others. */
.mcpag-mini-3d .mcpag-canvas-wrap {
	min-height: min(62vh, 560px);
	padding-inline-start: 52px;
}


.mcpag-mini-3d .mcpag-canvas {
	width: 100%;
	height: 100%;
	max-width: none;
}

/* Turning is a drag and everything else is a click, so the cursor says which
   one this is before anybody tries it. */
.mcpag-mini-3d .mcpag-canvas-wrap:not(.has-result) {
	cursor: crosshair;
}

/* How much of the build to show, on the picture with the rest of the
   controls that act on it. */
.mcpag-stage-slice {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	background: color-mix(in srgb, var(--mcpag-panel-bg, #fff) 88%, transparent);
	border-radius: var(--mcpag-btn-radius, 8px);
}

.mcpag-stage-slice .mcpag-range {
	width: min(220px, 40vw);
	margin: 0;
}

/* A slider's track is a few pixels tall and its thumb is what you grab, so
   on a touchscreen the input is given the height rather than the track: the
   whole row becomes something a thumb can land on. */
@media (hover: none), (max-width: 560px) {
	.mcpag-stage-slice .mcpag-range {
		height: 34px;
	}
}

.mcpag-stage-layer-count {
	padding: 4px 10px;
	background: color-mix(in srgb, var(--mcpag-panel-bg, #fff) 88%, transparent);
	color: var(--mcpag-text, #1f2937);
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	border-radius: var(--mcpag-btn-radius, 8px);
}

/* Room under the picture for the arrows, so a shape centred in the box is
   not centred behind them. */
.mcpag-mini .mcpag-stage-frame:has(.mcpag-stage-layers:not([hidden])) .mcpag-canvas-wrap {
	padding-bottom: 44px;
}

/* What the command generator makes: a line to read and a button to take it
   away with. Monospace because it is a command, and wrapping because a long
   summon with a name tag on it is longer than the panel. */
/* On a touchscreen the companion tools have to be as tappable as the main
   one is. A checkbox is 13 pixels wherever it is drawn and a small ghost
   button is 32, both of which are fine under a pointer and short of the 44
   the rest of the plugin gives a thumb — so the label around the box and the
   layer arrows are grown rather than the controls inside them. */
@media (hover: none), (max-width: 560px) {
	.mcpag-mini .mcpag-check-inline {
		min-height: 44px;
		align-items: center;
	}

	.mcpag-mini .mcpag-btn-small {
		min-height: 44px;
	}
}

.mcpag-mini-command {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 4px 0 0;
}

.mcpag-mini-code {
	flex: 1 1 260px;
	min-width: 0;
	padding: 9px 11px;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	color: var(--mcpag-text, #1f2937);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
	line-height: 1.5;
	word-break: break-word;
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-btn-radius, 8px);
	user-select: all;
}

.mcpag-mini-copy {
	flex: 0 0 auto;
}

/* The fade in the order it is placed, which is the answer a gradient is for.
   Numbered, because "the third one" is how somebody building it will think
   about it. */
.mcpag-mini-ramp {
	counter-reset: mcpag-step;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
	font-weight: 400;
}

/* A flex item has no list marker, so the step number is drawn rather than
   left to the list: without it the order is there and unreadable. */
.mcpag-mini-ramp li {
	counter-increment: mcpag-step;
	display: flex;
	align-items: center;
	gap: 6px;
}

.mcpag-mini-ramp li::before {
	content: counter(mcpag-step) ".";
	color: var(--mcpag-muted, #6b7280);
	font-variant-numeric: tabular-nums;
}

.mcpag-mini-chip {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 2px;
}

.mcpag-mini-summary {
	margin: 0;
	color: var(--mcpag-text, #1f2937);
	font-weight: 600;
}

.mcpag-mini-counts .mcpag-materials-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86em;
}

.mcpag-mini-counts td {
	padding: 5px 8px;
	border-bottom: 1px solid var(--mcpag-border, #e5e7eb);
}

.mcpag-mini-counts td:not(:first-child) {
	text-align: end;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mcpag-mini-more {
	margin: 0;
	font-size: 0.86em;
}

.mcpag-mini-more a {
	color: var(--mcpag-accent, #2563eb);
	text-decoration: underline;
}

.mcpag-mini .mcpag-dropzone {
	padding: 18px;
}

/* The companion tools never take the shell — they are one panel on a page of
   their own — so they get the same grid on their own terms: two downloads
   across on a phone, and all of them on one line wherever there is room. */
.mcpag-mini .mcpag-exports {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.mcpag-mini .mcpag-exports .mcpag-btn {
	justify-content: center;
	padding-inline: 10px;
	text-align: center;
	overflow-wrap: break-word;
}

.mcpag-mini .mcpag-canvas-wrap {
	min-height: 180px;
	max-height: 52vh;
}

.mcpag-mini-symbol {
	display: inline-block;
	min-width: 1.4em;
	margin-inline-start: 4px;
	color: var(--mcpag-muted, #6b7280);
	font-family: var(--mcpag-font, sans-serif);
	text-align: center;
}

.mcpag-mini-starter {
	margin: 0;
}

/* =======================================================================
   Starting from nothing

   Three ways in, side by side: an image to convert, an empty grid to draw
   on, or a build saved earlier. They wrap on a narrow screen rather than
   shrinking to three unreadable stubs.
   ======================================================================= */

.mcpag-start-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 4px;
}

.mcpag-btn-icon {
	flex: 0 0 auto;
	margin-inline-end: 2px;
}

.mcpag-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	color: var(--mcpag-muted, #6b7280);
	border: 0;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
}

.mcpag-icon-btn:hover {
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	color: var(--mcpag-text, #1f2937);
}

.mcpag-icon-btn:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
}

/* =======================================================================
   Shapes

   The picker sits beside the preview rather than over it: placing a shape is
   a matter of watching it move, and a panel covering the picture would hide
   the only thing worth looking at.
   ======================================================================= */

/* The picture and the two things that float over it. Nothing in here is in
   the flow with the picture, so opening the picker or picking up a shape
   never moves it. */
.mcpag-stage-frame {
	position: relative;
	min-width: 0;
}

/* -----------------------------------------------------------------------
   The library

   A dropdown hanging off the Shapes button: the shapes themselves in a grid
   and nothing else. A title, a sentence and a name under every thumbnail
   made a page out of a picker, and the page covered the picture somebody was
   about to drop a shape onto.

   It is a child of the tool rather than of the panel it belongs to, so the
   script can place it against a button that moves between columns and sits
   in a row that scrolls sideways. Nothing above it is in the flow with the
   picture, so opening it never moves anything.
   ----------------------------------------------------------------------- */

.mcpag-shapes {
	position: absolute;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: min(272px, calc(100% - 12px));
	max-height: 240px;
	padding: 6px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
}

.mcpag-shape-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: 4px;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mcpag-shapes-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 6px;
}

.mcpag-shape-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 4px;
	background: transparent;
	color: var(--mcpag-text, #1f2937);
	border: var(--mcpag-border-width, 1px) solid transparent;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
}

.mcpag-shape-btn:hover {
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	border-color: var(--mcpag-accent, #2563eb);
}

.mcpag-shape-btn:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: -2px;
}

/* Drawn at one pixel per cell and scaled up, so the thumbnail is the shape
   exactly as it will land rather than a smoothed impression of it. */
.mcpag-shape-thumb {
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* The name comes from tips.js, for the same reason the tools' names do: this
   grid scrolls, and a label drawn inside a box that scrolls is a label
   clipped away by it. */

/* The bar that appears while a shape is on the art and not yet part of it.
   Over the top of the picture rather than above it: it comes and goes with
   every shape, and a strip that shoves the picture down each time is the
   picture moving under somebody's hand mid-placement. */
.mcpag-shape-bar {
	position: absolute;
	inset: 8px 8px auto;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 8px 10px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
	background: color-mix(in srgb, var(--mcpag-accent, #2563eb) 10%, var(--mcpag-panel-bg, #fff));
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-accent, #2563eb);
	border-radius: var(--mcpag-radius, 12px);
	font-size: 0.86em;
}

.mcpag-shape-name {
	font-weight: 600;
}

.mcpag-shape-size {
	color: var(--mcpag-muted, #6b7280);
	font-variant-numeric: tabular-nums;
	margin-inline-end: auto;
}


/* =======================================================================
   The download question

   Over everything and in the way, which is the point: a preference can be
   left unread, a question cannot. Fixed to the window rather than to the
   tool, because the tool can be taller than the screen and a dialog you
   have to scroll to is a dialog that was missed.
   ======================================================================= */

.mcpag-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.mcpag-modal-back {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}

.mcpag-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(420px, 100%);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 16px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.4);
	animation: mcpag-dialog-in 160ms ease-out;
}

@keyframes mcpag-dialog-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcpag-dialog {
		animation: none;
	}
}

.mcpag-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mcpag-dialog-title {
	font-size: 1.05em;
}

/* Each answer is a target rather than a line of text with a button after it:
   the whole thing is the button, so there is nothing to aim at and miss. */
.mcpag-choice {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	padding: 11px 13px;
	text-align: start;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	color: var(--mcpag-text, #1f2937);
	font-family: inherit;
	font-size: 1em;
	border: 2px solid transparent;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
	transition: border-color var(--mcpag-transition, 0.18s ease);
}

.mcpag-choice:hover {
	border-color: var(--mcpag-accent, #2563eb);
}

.mcpag-choice:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
}

/* The one the site would rather people took. Marked, not enforced. */
.mcpag-choice.is-primary {
	background: var(--mcpag-accent, #2563eb);
	color: var(--mcpag-accent-text, #ffffff);
}

.mcpag-choice-name {
	font-weight: 600;
}

.mcpag-choice-note {
	font-size: 0.84em;
	opacity: 0.82;
}

/* =======================================================================
   AI pixel art

   A form rather than a picker, so it is wider than the shape library and the
   frame list — but it floats over the picture the same way they do, because a
   panel that pushed the canvas down the page would move the thing it is about
   to draw on.
   ======================================================================= */

.mcpag-ai {
	position: absolute;
	z-index: 45;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(380px, calc(100% - 12px));
	max-height: min(72vh, 560px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 12px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
}

.mcpag-ai .mcpag-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	font-size: 0.9em;
}

.mcpag-ai .mcpag-check {
	font-size: 0.9em;
}

.mcpag-ai-wide {
	width: 100%;
	justify-content: center;
}

/* The prompt and the reply are both things somebody moves between windows in
   one go, so they are monospaced — the JSON in them has to look like JSON —
   and they wrap rather than scroll sideways. A box this narrow with a line
   that runs off the right is a box showing the middle of a sentence. */
.mcpag-ai-prompt,
.mcpag-ai-reply,
.mcpag-ai-notes {
	width: 100%;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78em;
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	overflow-x: hidden;
}

.mcpag-ai-notes {
	font-family: inherit;
	font-size: 0.9em;
	white-space: normal;
}

/* The two questions an animation needs, indented under the switch that asks
   for one so the pair reads as belonging to it. */
.mcpag-ai-motion {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-inline-start: 10px;
	border-inline-start: 2px solid var(--mcpag-border, #e5e7eb);
}

/* The seconds beside the frame count, because frames are an odd unit to
   choose in and a couple of seconds is what somebody actually wants. */
.mcpag-ai-runtime {
	color: var(--mcpag-muted, #6b7280);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.mcpag-ai-result {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
	border-top: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

/* The label and the copy button share a line: the button belongs to the box
   under it, and a row of its own would say otherwise. */
.mcpag-ai-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.mcpag-ai-head .mcpag-label {
	margin: 0;
	min-width: 0;
}

/* =======================================================================
   Animation

   The frame list is the same shape as the shape library and for the same
   reason: hung off the button that opens it, floating over the picture,
   never in the flow with it. Opening it must not move the thing whose
   frames it is listing.
   ======================================================================= */

.mcpag-frames {
	position: absolute;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(300px, calc(100% - 12px));
	max-height: min(60vh, 380px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
}

/* One row that scrolls rather than a grid that grows: frames are in an
   order, and an order reads along a line. Five thumbnails fit a phone. */
.mcpag-frame-list {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 2px;
}

.mcpag-frame {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 3px;
	background: var(--mcpag-panel-alt-bg, #f1f3f6);
	border: 2px solid transparent;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
}

.mcpag-frame:hover {
	border-color: color-mix(in srgb, var(--mcpag-accent, #2563eb) 50%, transparent);
}

.mcpag-frame.is-active {
	border-color: var(--mcpag-accent, #2563eb);
}

.mcpag-frame:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: 2px;
}

/* Drawn at whole pixels per block, so a thumbnail is the frame rather than a
   blurred guess at it. */
.mcpag-frame canvas {
	max-width: 100%;
	max-height: 100%;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* The number, because five small pictures of nearly the same thing are hard
   to count and an animation is entirely about their order. */
.mcpag-frame-no {
	position: absolute;
	inset: auto 2px 2px auto;
	min-width: 14px;
	padding: 0 3px;
	background: var(--mcpag-heading, #111827);
	color: var(--mcpag-panel-bg, #ffffff);
	border-radius: 4px;
	font-size: 0.62em;
	line-height: 1.5;
	text-align: center;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.mcpag-frame-tools {
	display: flex;
	gap: 4px;
}

.mcpag-frame-field {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.86em;
}

.mcpag-frame-field .mcpag-label {
	flex: 1 1 auto;
	margin: 0;
}

.mcpag-frame-field .mcpag-input {
	flex: 0 0 auto;
	width: 5.5em;
	min-width: 0;
}

.mcpag-frame-unit {
	flex: 0 0 auto;
	color: var(--mcpag-muted, #6b7280);
}

.mcpag-frames .mcpag-check {
	font-size: 0.86em;
}

.mcpag-frame-save {
	width: 100%;
}

/* -----------------------------------------------------------------------
   The offer, after a download

   Over the tool, bottom corner, on its own timer. It is an offer rather
   than a question, so it never takes the page over and never waits to be
   answered.
   ----------------------------------------------------------------------- */

.mcpag-prompt {
	/* Pinned to the window rather than to the tool. The download buttons are
	   in one column in one layout and along the bottom in another, and the
	   page may be scrolled anywhere in a tool that is taller than the screen,
	   so the only place that is reliably in view is the corner of the view. */
	position: fixed;
	inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) auto;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(320px, calc(100% - 24px));
	padding: 10px 12px;
	background: var(--mcpag-panel-bg, #ffffff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-accent, #2563eb);
	border-radius: var(--mcpag-radius, 12px);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
}

.mcpag-prompt.is-open {
	animation: mcpag-prompt-in 220ms ease-out;
}

@keyframes mcpag-prompt-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcpag-prompt.is-open {
		animation: none;
	}
}

.mcpag-prompt-body {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.mcpag-prompt-icon {
	flex: 0 0 auto;
	color: var(--mcpag-accent, #2563eb);
}

.mcpag-prompt-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 0.88em;
}

.mcpag-prompt-text span {
	color: var(--mcpag-muted, #6b7280);
}

.mcpag-prompt-close {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

/* Above the action bar, which is pinned to the same corner of the same
   window and would otherwise sit on top of it. */
.mcpag-is-mobile .mcpag-prompt {
	bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* =======================================================================
   The mobile shell

   One arrangement for every layout, sized to the screen rather than to its
   contents: a bar of icons, a drawer under it, the picture in the middle
   and the drawing tools along the bottom. The picture gets whatever nothing
   else claimed, which is what keeps it in view whatever is open.
   ======================================================================= */

.mcpag-shell {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Every strip inside is allowed to be narrower than its contents, because
	   several of them scroll sideways. Without this a row of nine tools sets
	   the width of the whole tool and the page grows a horizontal scrollbar
	   nobody asked for. */
	min-width: 0;
	height: min(calc(100vh - 24px), 900px);
	/* Dynamic viewport units where they exist: on a phone the address bar
	   slides away, and a shell measured against the tall viewport would put
	   the drawing tools under it until it did. */
	height: min(calc(100dvh - 24px), 900px);
	min-height: 460px;
}

/* The layouts the shell replaces. Their panels have been moved into it, so
   what is left is a set of empty boxes with borders and gaps. */
.mcpag-shell-on .mcpag-body,
.mcpag-shell-on .mcpag-region,
.mcpag-shell-on .mcpag-studio,
.mcpag-shell-on .mcpag-steps,
.mcpag-shell-on .mcpag-wizard,
.mcpag-shell-on .mcpag-action-bar {
	display: none;
}

.mcpag-shell-on .mcpag-header {
	margin-bottom: 10px;
}

/* Padding for a bar that is no longer there. */
.mcpag-shell-on.mcpag-is-mobile {
	padding-bottom: 0;
}

/* The icon bar --------------------------------------------------------- */

.mcpag-shell-bar {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
	padding: 4px;
	background: var(--mcpag-panel-bg, #fff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.mcpag-shell-tab {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	justify-content: center;
	/* Six of these plus their gaps fit a 390px screen exactly, which is what
	   stops the last one being a stub somebody has to scroll to find. */
	min-width: 52px;
	min-height: 46px;
	padding: 5px 6px;
	background: transparent;
	color: var(--mcpag-muted, #6b7280);
	font-family: inherit;
	font-size: 10px;
	line-height: 1.1;
	border: 0;
	border-radius: var(--mcpag-btn-radius, 8px);
	cursor: pointer;
}

.mcpag-shell-tab:hover {
	color: var(--mcpag-text, #1f2937);
}

.mcpag-shell-tab.is-active {
	background: var(--mcpag-btn-bg, #2563eb);
	color: var(--mcpag-btn-text, #fff);
}

.mcpag-shell-tab:focus-visible {
	outline: 2px solid var(--mcpag-accent, #2563eb);
	outline-offset: -2px;
}

.mcpag-shell-icon {
	display: block;
}

.mcpag-shell-label {
	max-width: 72px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The drawer ------------------------------------------------------------ */

.mcpag-shell > * {
	min-width: 0;
}

/* The bar and whatever it opened. The drawer hangs off the bottom of the bar
   rather than sitting under it in the flow, so opening the settings floats
   them over the picture instead of shoving it down the screen — the picture
   is the thing the settings are about, and moving it the moment somebody
   reaches for them is the worst time to move it. */
.mcpag-shell-head {
	position: relative;
	z-index: 10;
	flex: 0 0 auto;
	min-width: 0;
}

.mcpag-shell-sheet {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	/* Never the whole screen: about half of it, so the picture behind stays
	   visible and it is obvious what the drawer is changing. */
	max-height: min(48vh, 420px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
	background: var(--mcpag-panel-bg, #fff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
	overflow: hidden;
}

.mcpag-shell-sheet-head {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-bottom: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
}

.mcpag-shell-sheet-title {
	font-size: 0.92em;
}

.mcpag-shell-sheet-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* A panel in a drawer is already named by the drawer, so it drops its own
   chrome: no second heading, no second border, no second box. */
.mcpag-shell-pane > .mcpag-panel,
.mcpag-shell-stage > .mcpag-panel {
	margin: 0;
	padding: 10px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* The heading is the part a drawer replaces — the drawer already carries the
   section's name across the top. What else lives in that row stays: the Copy
   material list button and the build guide's Back and Next are controls, not
   decoration, and hiding the row they share with the title takes them with
   it. */
.mcpag-shell-pane > .mcpag-panel > .mcpag-panel-head > .mcpag-panel-title,
.mcpag-shell-pane > .mcpag-panel > .mcpag-panel-head > .mcpag-panel-toggle,
.mcpag-shell-stage > .mcpag-panel > .mcpag-panel-head > .mcpag-panel-title,
.mcpag-shell-stage > .mcpag-panel > .mcpag-panel-head > .mcpag-panel-toggle {
	display: none;
}

/* A head left with nothing in it should not still cost a row of padding. */
.mcpag-shell-pane > .mcpag-panel > .mcpag-panel-head:not(:has(> :not(.mcpag-panel-title):not(.mcpag-panel-toggle))),
.mcpag-shell-stage > .mcpag-panel > .mcpag-panel-head:not(:has(> :not(.mcpag-panel-title):not(.mcpag-panel-toggle))) {
	display: none;
}

.mcpag-shell-pane .mcpag-palette {
	max-height: none;
}

/* The stage ------------------------------------------------------------- */

.mcpag-shell-stage {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	min-height: 150px;
}

.mcpag-shell-stage > .mcpag-panel,
.mcpag-shell-stage > .mcpag-panel > .mcpag-panel-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: 0;
}

/* The whole point: the preview takes the height nothing else claimed, and
   never grows past it. Opening a drawer shrinks it; it does not scroll it
   away. */
.mcpag-shell-stage .mcpag-canvas-wrap {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	padding: 6px;
}

/* The empty-state line under the preview says what the empty preview
   already says, and the space it takes is the space the picture wanted. */
.mcpag-shell-stage > .mcpag-panel > .mcpag-panel-content > .mcpag-hint {
	display: none;
}

/* The tool row ---------------------------------------------------------- */

.mcpag-shell-tools {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 6px;
	background: var(--mcpag-panel-bg, #fff);
	border: var(--mcpag-border-width, 1px) solid var(--mcpag-border, #e5e7eb);
	border-radius: var(--mcpag-radius, 12px);
}

/* Every strip in here scrolls sideways rather than wrapping, so every one of
   them has to be allowed to be narrower than its contents. A flex item is
   not, by default: its minimum is the width of what is inside it. */
.mcpag-shell-tools > *,
.mcpag-shell-main .mcpag-editor,
.mcpag-shell-main .mcpag-editor > * {
	min-width: 0;
}

.mcpag-shell-main .mcpag-editor {
	gap: 6px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

/* Undo and redo sit at the end of a row that already scrolls; pushing them
   to the far end would put them past the edge of the screen. */
.mcpag-shell-main .mcpag-history {
	margin-inline-start: 0;
}

/* One row, always. Nine tools wrapped over three lines is three times the
   height for the same nine tools, and every line of it comes out of the
   picture. */
.mcpag-shell-main .mcpag-toolbar {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.mcpag-shell-main .mcpag-toolbar > * {
	flex: 0 0 auto;
}

.mcpag-shell-main .mcpag-swatch-strip {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.mcpag-shell-main .mcpag-swatch-strip .mcpag-strip-swatch {
	flex: 0 0 auto;
}

/* Two things that only make sense with a keyboard and a wide row: the
   Ctrl+Z hint, and the words "Painting with" in front of a swatch that
   already says so. */
.mcpag-shell-main .mcpag-editor > .mcpag-hint,
.mcpag-shell-main .mcpag-active-block .mcpag-label {
	display: none;
}

.mcpag-shell-actions {
	display: flex;
	gap: 6px;
}

.mcpag-shell-actions .mcpag-actions {
	display: flex;
	/* Side by side, not stacked: two full-width buttons cost as much height
	   as the whole tool row above them, and that height comes out of the
	   picture. */
	flex: 1 1 auto;
	flex-direction: row;
	gap: 6px;
	margin: 0;
}

.mcpag-shell-actions .mcpag-btn {
	flex: 1 1 auto;
	min-height: 40px;
	padding-inline: 10px;
	/* Small enough that "Generate pixel art" is one line: wrapped to two it
	   costs another twenty pixels of picture for no extra meaning. */
	font-size: 0.86em;
	justify-content: center;
}

/* Reset is the one button here nobody means to press, so it gets the room
   it needs and no more. */
.mcpag-shell-actions .mcpag-btn-ghost {
	flex: 0 0 auto;
}

.mcpag-shell-meta {
	display: flex;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	min-height: 1.2em;
	font-size: 0.76em;
}

.mcpag-shell-meta .mcpag-status {
	margin: 0;
	flex: 1 1 auto;
	text-align: end;
}

.mcpag-shell-meta .mcpag-zoom-readout {
	flex: 0 0 auto;
}

/* Glyphs only ----------------------------------------------------------- */

/* Panels keep their off-screen headings, and those are absolutely
   positioned, so the boxes they sit in have to be what they are positioned
   against — otherwise a heading inside a row that scrolls sideways is placed
   against an ancestor outside it and drags the page along with it. */
.mcpag-shell-pane > .mcpag-panel,
.mcpag-shell-stage > .mcpag-panel,
.mcpag-shell-main .mcpag-toolbar,
.mcpag-shell-main .mcpag-swatch-strip {
	position: relative;
}

.mcpag-shell-on .mcpag-tool {
	min-width: 42px;
	min-height: 42px;
	padding: 0;
	justify-content: center;
}

/* Brush size stays — it is what the brush and the eraser are for — but it
   shares the row with nine tools, so it takes as little of it as it can. */
.mcpag-shell-on .mcpag-tool-size {
	gap: 4px;
	padding-inline-start: 4px;
}

.mcpag-shell-on .mcpag-tool-size .mcpag-range {
	width: 68px;
}

/* Generate and Reset sit side by side down here rather than stacked: two
   full-width buttons would cost as much height as the tool row above them. */
.mcpag-shell-actions .mcpag-btn-block {
	width: auto;
}