/* plugins/pixel-editor/assets/css/pixel-editor.css */

/* ---------------------------------------------------------------------------------------
   Page: the editor fills the window below the site header; the footer is not shown
   --------------------------------------------------------------------------------------- */

.pixel-editor-page #page {
	height: 100vh;
}

.pixel-editor-page #content {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.pixel-editor-page .site-footer {
	display: none;
}

/* The site's menu sits at the left of the window, over the editor's left edge, as on the
   Pi.js editor page */
.pixel-editor-page .site-header .container {
	margin-left: 0;
	padding-left: 0;
}

.pixel-editor {
	--pixel-editor-checker-light: #c4c4c4;
	--pixel-editor-checker-dark: #9a9a9a;
	--pixel-editor-overlay-light: #ffffff;
	--pixel-editor-overlay-dark: #000000;
	--pixel-editor-overlay-accent: #ffd84d;
	--pixel-editor-side-left: 236px;
	--pixel-editor-side-right: 268px;

	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background-color: var( --pi-color-panel );
	color: var( --pi-color-text );
	font-size: 14px;
}

.pixel-editor__notice {
	margin: var( --pi-space-lg );
}

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

.pixel-editor--app {
	display: grid;
	grid-template-columns:
		var( --pixel-editor-side-left ) minmax( 0, 1fr ) var( --pixel-editor-side-right );
	grid-template-rows: auto minmax( 0, 1fr ) auto auto;
	grid-template-areas:
		"bar bar bar"
		"left stage right"
		"strip strip strip"
		"status status status";
}

.pixel-editor button,
.pixel-editor input {
	font: inherit;
	color: inherit;
}

/* The text on a button cannot be selected, in the editor or in its dialogs */
.pixel-editor button,
.px-modal button {
	-webkit-user-select: none;
	user-select: none;
}

/* The editor's dialogs take their size from the rules for each below, as tall as what they
   hold unless a rule says otherwise, and stay on the screen. Dragging the corner resizes them. */
.px-modal .pi-modal {
	max-height: calc( 100vh - 48px );
}

/* The theme's focus border makes a button 6px bigger, so a dialog as tall as what it holds
   grew as a button was pressed. An outline takes no room, and shows for the keyboard only. */
.px-modal .btn-retro:focus {
	border: none;
}

.px-modal .btn-retro:focus-visible {
	outline: 3px dotted var( --pi-color-text-dim );
	outline-offset: 2px;
}

.pixel-editor input[type="number"],
.pixel-editor input[type="text"] {
	width: 100%;
	padding: 2px var( --pi-space-xs );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
}

.pixel-editor input:disabled {
	opacity: 0.5;
}

.pixel-editor__bar {
	grid-area: bar;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --pi-space-sm );
	padding: var( --pi-space-sm ) var( --pi-space-md );
	border-bottom: 1px solid var( --pi-color-bg );
}

.pixel-editor__side {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-md );
	padding: var( --pi-space-sm );
	overflow-y: auto;
}

.pixel-editor__side--left {
	grid-area: left;
	border-right: 1px solid var( --pi-color-bg );
}

.pixel-editor__side--right {
	grid-area: right;
	border-left: 1px solid var( --pi-color-bg );
}

/* Pi.js sizes its canvas from this element, so it needs a real size and no padding */
.pixel-editor__stage {
	grid-area: stage;
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background-color: var( --pi-code-bg );
	cursor: crosshair;

	/* Fingers on the canvas draw, pan and zoom the picture, not the page */
	touch-action: none;
}

.pixel-editor__stage canvas {
	touch-action: none;
}

/* Holds the view's screen at one pixel for each display pixel, shrunk to fit the stage (see
   createSurface in render/canvas-view.js) */
.pixel-editor__surface {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
}

.pixel-editor__stage[data-cursor="pan"] {
	cursor: grab;
}

.pixel-editor__stage[data-cursor="panning"] {
	cursor: grabbing;
}

.pixel-editor__strip {
	grid-area: strip;
	display: flex;
	align-items: stretch;
	gap: var( --pi-space-md );
	padding: var( --pi-space-sm ) var( --pi-space-md );
	border-top: 1px solid var( --pi-color-bg );
}

.pixel-editor__status {
	grid-area: status;
	display: flex;
	gap: var( --pi-space-lg );
	padding: 2px var( --pi-space-md );
	border-top: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
	color: var( --pi-color-text-dim );
	font-family: var( --pi-font-family-code );
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
}

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

.px-btn {
	display: inline-flex;
	align-items: center;
	gap: var( --pi-space-xs );
	padding: var( --pi-space-xs ) var( --pi-space-sm );
	border: none;
	background-color: var( --pi-color-panel );
	box-shadow: 3px 3px 0 0 var( --pi-color-shadow );
	color: var( --pi-color-text-bright );
	font-weight: bold;
	cursor: pointer;
}

.px-btn .ti {
	font-size: 18px;
}

.px-btn--icon {
	padding: var( --pi-space-xs );
}

.px-btn:hover:not( :disabled ) {
	background-color: var( --pi-accent-dark-red );
}

.px-btn:active:not( :disabled ) {
	transform: translate( 1px, 1px );
	box-shadow: 2px 2px 0 0 var( --pi-color-shadow );
}

.px-btn:disabled {
	color: var( --pi-color-text-dim );
	cursor: default;
}

.px-btn[aria-pressed="true"] {
	background-color: var( --pi-accent-blue-dark );
}

/* Small buttons inside panels: no shadow, so rows of them stay quiet */
.px-btn--flat,
.px-panel__actions .px-btn {
	padding: 2px;
	background: none;
	box-shadow: none;
	color: var( --pi-color-text );
}

.px-btn--flat .ti,
.px-panel__actions .px-btn .ti {
	font-size: 16px;
}

.px-btn--flat:hover:not( :disabled ),
.px-panel__actions .px-btn:hover:not( :disabled ) {
	background: none;
	color: var( --pi-nav-active );
}

.px-panel__actions .px-btn:disabled {
	color: var( --pi-color-text-dim );
}

.pixel-editor button:focus-visible,
.pixel-editor input:focus-visible {
	outline: 2px solid var( --pi-accent-blue );
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------------------------
   Command bar
   --------------------------------------------------------------------------------------- */

.px-bar__project {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var( --pi-space-xs );
	padding: var( --pi-space-xs ) var( --pi-space-sm );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
	color: var( --pi-color-text-bright );
	font-weight: bold;
	white-space: nowrap;
}

.px-bar__sep {
	align-self: stretch;
	width: 1px;
	margin: 0 var( --pi-space-xs );
	background-color: var( --pi-nav-border );
}

.px-bar__spacer {
	flex: 1;
}

/* The four backgrounds: each button shows its own */
.px-backgrounds {
	display: inline-flex;
	align-items: center;
	gap: var( --pi-space-xs );
}

.px-backgrounds__button {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid var( --pi-nav-border );
	background-size: 24px 24px;
	image-rendering: pixelated;
	cursor: pointer;
}

.px-backgrounds__button:hover {
	border-color: var( --pi-color-text-bright );
}

.px-backgrounds__button[aria-pressed="true"] {
	border-color: var( --pi-color-text-bright );
	outline: 2px solid var( --pi-accent-blue );
}

.px-bar__zoom {
	min-width: 56px;
	font-family: var( --pi-font-family-code );
	text-align: center;
}

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

.px-panel__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 var( --pi-space-sm );
	color: var( --pi-color-text-dim );
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* A short tip at the right of a panel's heading, written as it is, not as a heading */
.px-panel__tip {
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
}

.px-panel__tip kbd {
	color: var( --pi-color-text-bright );
	font-family: var( --pi-font-family-code );
	font-weight: bold;
}

.px-panel__actions {
	display: flex;
	gap: 2px;
}

.px-hint {
	margin: 0;
	color: var( --pi-color-text-dim );
	font-size: 12px;
}

.px-field {
	display: grid;
	grid-template-columns: 64px minmax( 0, 1fr ) auto;
	align-items: center;
	gap: var( --pi-space-sm );
	margin-top: var( --pi-space-sm );
}

.px-field input[type="range"] {
	width: 100%;
	accent-color: var( --pi-accent-blue );
}

.px-field__value {
	min-width: 40px;
	color: var( --pi-color-text-dim );
	font-family: var( --pi-font-family-code );
	font-size: 12px;
	text-align: right;
}

/* An option that does not apply right now */
.px-field[hidden] {
	display: none;
}

/* A label with a row of choices beside it */
.px-field--choice {
	grid-template-columns: 64px minmax( 0, 1fr );
}

/* Long or many choices: the label above, the toggle buttons under it, two to a row for
   many. Two classes, so these win over the plain field and row rules wherever those sit */
.px-field.px-field--below {
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --pi-space-xs );
}

/* The Stamp tool's stamp: its picture, its name and size, and the Stamps button */
.px-stamp-pick {
	display: flex;
	align-items: center;
	gap: var( --pi-space-sm );
}

.px-stamp-pick__picture {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.px-stamp-pick__picture[hidden] {
	display: none;
}

.px-stamp-pick__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.px-stamp-pick__name {
	overflow: hidden;
	color: var( --pi-color-text-bright );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.px-stamp-pick__size,
.px-stamps__size {
	color: var( --pi-color-text-dim );
	font-size: 12px;
}

/* A stamp's picture fits its box, keeping its pixels square */
.px-stamp-pick__picture canvas,
.px-stamps__canvas {
	max-width: 100%;
	max-height: 100%;
	image-rendering: pixelated;
}

/* Stamps: a grid of tiles, each with its picture, name, size and buttons. A fixed size,
   so the dialog does not grow when the first stamps come in: the grid takes the room the
   buttons leave, and scrolls */
.px-stamps-modal .pi-modal {
	width: 600px;
	max-width: calc( 100vw - 32px );
	height: 520px;
	max-height: calc( 100vh - 48px );
}

.px-stamps-modal .pi-modal-body,
.px-stamps-modal .pi-modal-content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.px-stamps-modal .px-dialog {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.px-stamps__bar {
	display: flex;
	flex: none;
	gap: var( --pi-space-sm );
	margin-bottom: var( --pi-space-sm );
}

.px-stamps {
	display: grid;
	flex: 1;
	grid-template-columns: repeat( auto-fill, minmax( 120px, 1fr ) );
	grid-auto-rows: max-content;
	align-content: start;
	gap: var( --pi-space-sm );
	min-height: 0;
	overflow-y: auto;
}

.px-stamps__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --pi-space-xs );
	padding: var( --pi-space-sm );
	border: 1px solid transparent;
	background-color: var( --pi-color-bg );
	cursor: pointer;
}

.px-stamps__tile:hover {
	border-color: var( --pi-nav-highlight );
}

.px-stamps__tile:has( input:checked ) {
	border-color: var( --pi-accent-blue );
}

/* The radio button stays for the keyboard and screen readers; the border shows the choice */
.px-stamps__tile input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.px-stamps__picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
}

.px-stamps__canvas {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.px-stamps__name {
	max-width: 100%;
	overflow: hidden;
	color: var( --pi-color-text-bright );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.px-stamps__actions {
	display: flex;
	gap: var( --pi-space-xs );
}

.px-stamps__empty {
	grid-column: 1 / -1;
	margin: var( --pi-space-lg ) var( --pi-space-md );
	color: var( --pi-color-text-dim );
	text-align: center;
}

/* Resize: the mode across the top; the sizes on the left, one grid so the fields and units
   line up, a bracket and link joining width and height; the anchor or scaling on the right.
   The dialog is as tall as what it holds. */
.px-resize-modal .pi-modal {
	width: 440px;
	max-width: calc( 100vw - 32px );
	height: auto;
	max-height: 90vh;
}

.px-resize__modes {
	margin-bottom: var( --pi-space-md );
}

.px-resize__modes .px-segment__button {
	flex: 1 1 0;
	padding: var( --pi-space-xs ) var( --pi-space-sm );
}

.px-resize__main {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: start;
	gap: var( --pi-space-lg );
}

.px-resize__sizes {
	display: grid;
	grid-template-columns: auto 96px auto 24px;
	grid-template-areas:
		"width-label width width-unit chain"
		"height-label height height-unit chain"
		"percent-label percent percent-unit ."
		"quick quick quick quick";
	align-items: center;
	gap: var( --pi-space-sm ) var( --pi-space-sm );
}

.px-resize__label {
	color: var( --pi-color-text );
}

.px-resize__width-label {
	grid-area: width-label;
}

.px-resize__height-label {
	grid-area: height-label;
}

.px-resize__percent-label {
	grid-area: percent-label;
}

#px-resize-width {
	grid-area: width;
}

#px-resize-height {
	grid-area: height;
}

#px-resize-percent {
	grid-area: percent;
}

.px-resize__width-unit {
	grid-area: width-unit;
}

.px-resize__height-unit {
	grid-area: height-unit;
}

.px-resize__percent-unit {
	grid-area: percent-unit;
}

.px-resize__unit {
	color: var( --pi-color-text-dim );
	font-family: var( --pi-font-family-code );
	font-size: 12px;
}

/* The fields keep to their column, whatever width the site gives inputs */
.px-resize .px-resize__sizes input[type="number"] {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* A bracket from width to height with the link at its middle, as in paint programs */
.px-resize__chain {
	grid-area: chain;
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

.px-resize__bracket {
	position: absolute;
	top: 25%;
	bottom: 25%;
	left: 0;
	width: 6px;
	border: 1px solid var( --pi-color-text );
	border-left: none;
}

.px-resize__link {
	position: relative;
	z-index: 1;
	display: flex;
	padding: 2px;
	border: none;
	background-color: var( --pi-color-panel );
	color: var( --pi-color-text-bright );
	font-size: 16px;
	cursor: pointer;
}

.px-resize__link:hover {
	color: var( --pi-accent-blue );
}

.px-resize__link--apart {
	color: var( --pi-color-text-dim );
}

.px-resize__quick {
	grid-area: quick;
	display: flex;
	gap: var( --pi-space-xs );
	margin-top: var( --pi-space-xs );
}

.px-resize__quick .px-btn {
	flex: 1;
	justify-content: center;
}

.px-resize__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --pi-space-sm );
}

.px-resize__side[hidden] {
	display: none;
}

.px-resize__anchor {
	display: grid;
	grid-template-columns: repeat( 3, 28px );
	gap: 3px;
}

.px-resize__anchor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
	color: var( --pi-color-text-bright );
	cursor: pointer;
}

.px-resize__anchor-button:hover {
	border-color: var( --pi-color-text-bright );
}

.px-resize__anchor-button[aria-pressed="true"] {
	border-color: var( --pi-accent-blue );
	background-color: var( --pi-accent-blue );
}

.px-resize__scaling {
	flex-direction: column;
	width: 96px;
}

.px-resize__scaling .px-segment__button {
	margin-left: 0;
	padding: var( --pi-space-xs ) var( --pi-space-sm );
}

.px-resize__scaling .px-segment__button + .px-segment__button {
	margin-top: -1px;
}

.px-resize .px-check {
	margin-top: var( --pi-space-md );
}

/* The note and error keep room for the longest note, three lines, so the dialog stays the
   same size as the note changes */
.px-resize__message {
	min-height: 3lh;
	margin-top: var( --pi-space-sm );
	font-size: 14px;
}

.px-resize__message .px-dialog__note {
	margin-top: 0;
}

/* The animation window floats: its overlay neither darkens the editor nor catches the
   pointer, so the pictures can be drawn on beside it. A fixed size to start, which the
   corner changes; the picture takes the room the controls and the frames leave. */
.px-player-modal.pi-modal-overlay {
	background: transparent;
	pointer-events: none;
}

.px-player-modal .pi-modal {
	width: 820px;
	height: 620px;
	max-width: calc( 100vw - 32px );
	min-width: 340px;
	min-height: 380px;
	pointer-events: auto;
	box-shadow: 0 4px 24px var( --pi-color-shadow );
}

.px-player-modal .pi-modal-footer {
	display: none;
}

.px-player-modal .pi-modal-body,
.px-player-modal .pi-modal-content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.px-player-modal .pi-modal-content {
	padding: var( --pi-space-sm );
	container-type: inline-size;
}

.px-player {
	flex: 1;
	display: flex;
	gap: var( --pi-space-md );
	min-height: 0;
}

.px-player__main,
.px-player__side {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-sm );
	min-width: 0;
	min-height: 0;
}

.px-player__main {
	flex: 1;
}

/* The frames and the pictures scroll on their own when the window is too short for them */
.px-player__side {
	flex: none;
	width: 300px;
	overflow-y: auto;
}

/* A narrow window puts the frames and the pictures under the controls */
@container ( max-width: 600px ) {
	.px-player {
		flex-direction: column;
		gap: var( --pi-space-sm );
	}

	.px-player__side {
		width: auto;
		max-height: 50%;
	}
}

.px-player__label {
	color: var( --pi-color-text-dim );
	font-size: 12px;
}

/* The picture, centered while it fits, and scrolled or dragged when it is bigger */
.px-player__stage {
	flex: 1;
	display: flex;
	min-height: 120px;
	overflow: auto;
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
	cursor: grab;
	touch-action: none;
}

.px-player__stage:active {
	cursor: grabbing;
}

.px-player__canvas {
	flex: none;
	margin: auto;
	background-size: 24px 24px;
	image-rendering: pixelated;
}

.px-player__reason {
	margin: 0;
}

.px-player__reason[hidden] {
	display: none;
}

.px-player__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --pi-space-xs ) var( --pi-space-sm );
}

.px-player__row--spread {
	justify-content: space-between;
}

/* The animation bar: the picker, its buttons and Copy code */
.px-player__bar {
	flex-wrap: nowrap;
}

.px-player .px-player__select {
	flex: 1;
	width: auto;
	min-width: 0;
	font-size: 13px;
}

.px-player__copy {
	flex: none;
}

/* The frames and the pictures to add: small thumbnails, numbered, wrapping onto more
   lines as they need */
.px-player__frames,
.px-player__pictures {
	position: relative;
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: var( --pi-space-xs );
	min-height: 52px;
	padding: var( --pi-space-xs );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
}

.px-player__pictures {
	border-style: dashed;
}

.px-player__cell,
.px-player__pick {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 2px;
	border: 1px solid transparent;
	background: none;
	color: var( --pi-color-text-dim );
	font-size: 10px;
	cursor: pointer;
	touch-action: none;
	user-select: none;
}

.px-player__cell:hover,
.px-player__pick:hover {
	border-color: var( --pi-nav-border );
	color: var( --pi-color-text-bright );
}

.px-player__cell--shown {
	border-color: var( --pi-accent-blue );
	color: var( --pi-color-text-bright );
}

.px-player__thumb {
	display: block;
	image-rendering: pixelated;
}

.px-player__number {
	line-height: 1;
}

.px-player__remove {
	position: absolute;
	top: -2px;
	right: -2px;
	display: none;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var( --pi-accent-red );
	color: var( --pi-color-text-bright );
	cursor: pointer;
}

.px-player__cell:hover .px-player__remove,
.px-player__cell--shown .px-player__remove,
.px-player__remove:focus-visible {
	display: flex;
}

.px-player__drop {
	position: absolute;
	width: 3px;
	background-color: var( --pi-accent-blue );
	pointer-events: none;
}

.px-player__drop[hidden],
.px-player__hint[hidden],
.px-player__add[hidden] {
	display: none;
}

.px-player__hint {
	margin: 0;
}

.px-player__add {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-xs );
}

.px-player__slider {
	flex: 1;
	min-width: 120px;
	accent-color: var( --pi-accent-blue );
}

.px-player__frame,
.px-player__zoom {
	min-width: 48px;
	font-family: var( --pi-font-family-code );
	font-size: 12px;
	text-align: center;
}

.px-player__transport,
.px-player__group {
	display: flex;
	align-items: center;
	gap: var( --pi-space-xs );
}

.px-player__play .ti {
	font-size: 20px;
}

.px-player__segment .px-segment__button {
	padding: 2px var( --pi-space-sm );
}

.px-player .px-player__delay {
	width: 64px;
}

.px-player__unit {
	color: var( --pi-color-text-dim );
	font-size: 12px;
	white-space: nowrap;
}

.px-player__fit {
	margin-left: var( --pi-space-xs );
	padding: 2px var( --pi-space-sm );
}

/* Quick colors under palette lock: the note takes the wheel's place */
.px-quick > [hidden] {
	display: none;
}

.px-quick__lock {
	max-width: 200px;
	margin: var( --pi-space-xs ) 0;
}

/* A linked project's Pi.js files, in Export → Spritesheet and the Pi.js image settings */
.px-pijs__files {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-xs );
	margin: 0;
	padding: 0;
	list-style: none;
}

.px-pijs__file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --pi-space-sm );
	padding: var( --pi-space-xs ) var( --pi-space-sm );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
}

.px-pijs__path {
	overflow-wrap: anywhere;
	font-family: var( --pi-font-family-code );
	font-size: 12px;
}

.px-btn[hidden] {
	display: none;
}

/* Help opened for a tool marks the tool's entry for a moment */
.px-help__list li {
	transition: background-color 0.6s ease;
}

.px-help__item--found {
	background-color: var( --pi-accent-blue-dark );
	outline: 1px solid var( --pi-accent-blue );
}

/* A drop-down list among the options, such as the Text tool's fonts */
.px-select {
	width: 100%;
	padding: 2px var( --pi-space-xs );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
	color: var( --pi-color-text );
	font: inherit;
}

/* A line about the option's value, such as who made a font */
.px-field__note {
	color: var( --pi-color-text-dim );
	font-size: 12px;
}

/* A character standing for a choice, such as a triangle for a corner */
.px-segment__button--glyph {
	font-size: 1.1em;
	line-height: 1;
}

.px-segment.px-segment--grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 2px;
}

.px-segment--grid .px-segment__button.px-segment__button {
	margin-left: 0;
	padding: 3px var( --pi-space-xs );
}

/* A button among the options that does something, the full width of the panel */
.px-field--action {
	grid-template-columns: minmax( 0, 1fr );
}

.px-field__action {
	justify-content: center;
}

.px-segment {
	display: flex;
}

/* Text too long for its button is cut short with "…" rather than spilling out of it */
.px-segment__button {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: -1px;
	padding: 2px;
	overflow: hidden;
	font-size: 13px;
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.px-segment__button .ti {
	font-size: 16px;
	vertical-align: middle;
}

.px-segment__button:first-child {
	margin-left: 0;
}

.px-segment__button[aria-pressed="true"] {
	position: relative;
	border-color: var( --pi-accent-blue );
	background-color: var( --pi-accent-blue-dark );
	color: var( --pi-color-text-bright );
}

.px-segment__button:disabled {
	cursor: default;
	opacity: 0.5;
}

.px-panel__body > .px-hint {
	margin-top: var( --pi-space-sm );
}

.px-btn--small {
	padding: 2px var( --pi-space-sm );
	box-shadow: 2px 2px 0 0 var( --pi-color-shadow );
	background-color: var( --pi-color-bg );
	font-size: 12px;
	font-weight: normal;
}

.px-btn--small .ti {
	font-size: 14px;
}

.px-check {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --pi-space-xs ) var( --pi-space-sm );
	margin-top: var( --pi-space-sm );
}

.px-check input {
	accent-color: var( --pi-accent-blue );
}

/* Behind thumbnails and previews: the background chosen for the canvas, which the editor
   sets on the page's root element */
.px-checker {
	background-color: var( --pixel-editor-back-color, #ffffff );
	background-image: var( --pixel-editor-back-image, none );
	background-size: 24px 24px;
	image-rendering: pixelated;
}

/* ---------------------------------------------------------------------------------------
   Tools
   --------------------------------------------------------------------------------------- */

.px-tools {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: var( --pi-space-xs );
}

.px-tools__label {
	margin: var( --pi-space-sm ) 0 var( --pi-space-xs );
	color: var( --pi-color-text-dim );
	font-size: 11px;
}

.px-tools__label:first-child {
	margin-top: 0;
}

.px-tool {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid transparent;
	background-color: var( --pi-color-bg );
	cursor: pointer;
}

.px-tool .ti {
	font-size: 20px;
}

/* A tool's picture, from assets/icons, at its own size */
.px-tool__icon {
	max-width: 32px;
	max-height: 32px;
}

.px-tool:hover:not( :disabled ) {
	border-color: var( --pi-nav-highlight );
}

.px-tool[aria-pressed="true"] {
	border-color: var( --pi-accent-blue );
	background-color: var( --pi-accent-blue-dark );
	color: var( --pi-color-text-bright );
}

.px-tool:disabled {
	color: var( --pi-color-text-dim );
	cursor: default;
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------------------
   Color
   --------------------------------------------------------------------------------------- */

.px-swatches {
	display: flex;
	align-items: center;
	gap: var( --pi-space-sm );
}

.px-swatches__fields {
	flex: 1;
	min-width: 0;
}

.px-swatches__fields .px-field {
	grid-template-columns: 40px minmax( 0, 1fr ) auto;
	margin-top: 0;
}

.px-swatches__fields .px-field + .px-field {
	margin-top: var( --pi-space-xs );
}

/* The color wheel: a pop-up beside the swatch it changes, over everything but dialogs */
.px-wheel {
	position: fixed;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-sm );
	padding: var( --pi-space-sm );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-panel );
	box-shadow: 3px 3px 0 0 var( --pi-color-shadow );
}

.px-wheel__title {
	margin: 0;
	color: var( --pi-color-text-bright );
	font-size: 12px;
	font-weight: bold;
}

.px-wheel__canvas {
	display: block;
	touch-action: none;
	cursor: crosshair;
}

/* A ring when the wheel has the keyboard, for its arrow and [ ] keys */
.px-wheel__canvas:focus-visible {
	outline: 2px solid var( --pi-accent-blue );
	outline-offset: 2px;
}

/* Dragging on a wheel does not select its labels; the hex field can still be selected */
.px-wheel,
.px-quick {
	-webkit-user-select: none;
	user-select: none;
}

.px-wheel input,
.px-quick input {
	-webkit-user-select: text;
	user-select: text;
}

/* The fields are as wide as the wheel; left alone, the hex box's own width would make the
   pop-up wider than the wheel */
.px-wheel__fields {
	width: 200px;
}

.px-wheel__fields input {
	min-width: 0;
}

.px-wheel__fields .px-field {
	grid-template-columns: 40px minmax( 0, 1fr ) auto;
	margin-top: 0;
}

.px-wheel__fields .px-field + .px-field {
	margin-top: var( --pi-space-xs );
}

.px-wheel__hex {
	font-family: var( --pi-font-family-code );
}

/* A tool option's color: a swatch over a checkerboard, which opens the color wheel */
.px-field__swatch {
	width: 100%;
	height: 24px;
	padding: 0;
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pixel-editor-checker-light );
	background-image:
		linear-gradient(
			var( --pixel-editor-swatch, transparent ), var( --pixel-editor-swatch, transparent )
		),
		repeating-conic-gradient( var( --pixel-editor-checker-dark ) 0% 25%, transparent 0% 50% );
	background-size: auto, 8px 8px;
	cursor: pointer;
}

/* A list of colors (the Gradient tool's own), laid out as the animation window's frames:
   a swatch each, its × on hover, and + at the end */
.px-colors {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var( --pi-space-xs );
	padding: var( --pi-space-xs );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
}

.px-colors__cell {
	position: relative;
	touch-action: none;
	user-select: none;
}

.px-colors .px-colors__swatch {
	display: block;
	width: 28px;
	height: 28px;
}

.px-colors__swatch:hover {
	border-color: var( --pi-color-text-bright );
}

.px-colors__remove {
	position: absolute;
	top: -5px;
	right: -5px;
	display: none;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var( --pi-accent-red );
	color: var( --pi-color-text-bright );
	cursor: pointer;
}

.px-colors__cell:hover .px-colors__remove,
.px-colors__cell:has( :focus-visible ) .px-colors__remove {
	display: flex;
}

/* The × in the red circles of the frames and the gradient colors, an icon so it sits in the
   middle, as a font's × does not */
.px-player__remove,
.px-colors__remove {
	align-items: center;
	justify-content: center;
}

.px-player__remove .ti,
.px-colors__remove .ti {
	font-size: 11px;
	line-height: 1;
}

.px-colors__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px dashed var( --pi-nav-border );
	background: none;
	color: var( --pi-color-text-dim );
	cursor: pointer;
}

.px-colors__add:hover {
	border-color: var( --pi-color-text-bright );
	color: var( --pi-color-text-bright );
}

.px-colors__add[hidden],
.px-colors__drop[hidden] {
	display: none;
}

.px-colors__drop {
	position: absolute;
	width: 3px;
	background-color: var( --pi-accent-blue );
	pointer-events: none;
}

.px-swatches__pair {
	position: relative;
	flex: none;
	width: 52px;
	height: 52px;
}

/* The quick colors pop-up, over the canvas where the pointer is: the color wheel, then the
   recent colors */
.px-quick {
	position: absolute;
	z-index: 30;
	padding: var( --pi-space-xs ) var( --pi-space-sm ) var( --pi-space-sm );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-panel );
	box-shadow: 3px 3px 0 0 var( --pi-color-shadow );
	cursor: default;
}

.px-quick[hidden] {
	display: none;
}

.px-quick:focus {
	outline: none;
}

.px-quick__title {
	margin: 0 0 var( --pi-space-xs );
	color: var( --pi-color-text-bright );
	font-size: 12px;
	font-weight: bold;
}

.px-quick .px-wheel__body {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-sm );
	margin-bottom: var( --pi-space-sm );
}

.px-recent__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --pi-space-sm );
	margin-bottom: var( --pi-space-xs );
}

.px-recent__title {
	margin: 0;
	color: var( --pi-color-text-dim );
	font-size: 12px;
}

.px-recent__reset {
	font-size: 12px;
}

.px-recent__reset:disabled {
	color: var( --pi-color-text-dim );
	cursor: default;
}

/* Ten to a row, the wheel's width: two rows hold all 20 */
.px-recent__grid {
	display: grid;
	grid-template-columns: repeat( 10, 18px );
	gap: 2px;
}

.px-recent__empty {
	max-width: 200px;
	margin: 0;
	font-size: 12px;
}

.px-recent__empty[hidden] {
	display: none;
}

/* Each color over a checkerboard, which shows through a see-through color */
.px-recent__swatch {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pixel-editor-checker-light );
	background-image:
		linear-gradient(
			var( --pixel-editor-swatch, transparent ), var( --pixel-editor-swatch, transparent )
		),
		repeating-conic-gradient( var( --pixel-editor-checker-dark ) 0% 25%, transparent 0% 50% );
	background-size: auto, 8px 8px;
	cursor: pointer;
}

.px-recent__swatch:hover {
	border-color: var( --pi-color-text-bright );
}

/* The color is laid over a checkerboard, which shows through a see-through color */
.px-swatches__color {
	position: absolute;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 2px solid var( --pi-color-text-bright );
	background-color: var( --pixel-editor-checker-light );
	background-image:
		linear-gradient(
			var( --pixel-editor-swatch, transparent ), var( --pixel-editor-swatch, transparent )
		),
		repeating-conic-gradient( var( --pixel-editor-checker-dark ) 0% 25%, transparent 0% 50% );
	background-size: auto, 8px 8px;
	cursor: pointer;
}

.px-swatches__color:disabled {
	cursor: default;
}

.px-swatches__color--primary {
	left: 0;
	top: 0;
	z-index: 1;
}

.px-swatches__color--secondary {
	right: 0;
	bottom: 0;
}

.px-swatches__fields input[type="text"] {
	font-family: var( --pi-font-family-code );
}

/* The palette's name, which opens the Palettes dialog, and the buttons for a Custom one */
.px-palette__header {
	display: flex;
	align-items: center;
	gap: var( --pi-space-xs );
	margin-top: var( --pi-space-sm );
}

.px-palette__header .px-btn[hidden] {
	display: none;
}

.px-palette__preset {
	flex: 0 1 auto;
	min-width: 0;
	margin-right: auto;
	font-size: 13px;
	font-weight: normal;
}

.px-palette__preset-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.px-palette__preset-from {
	overflow: hidden;
	color: var( --pi-color-text-dim );
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.px-palette__preset-from[hidden] {
	display: none;
}

/* The palette in its columns. A palette with few columns gets larger swatches, up to 32px. */
.px-palette {
	--pixel-editor-palette-columns: 13;

	display: grid;
	grid-template-columns: repeat( var( --pixel-editor-palette-columns ), minmax( 0, 1fr ) );
	gap: 1px;
	max-width: calc( var( --pixel-editor-palette-columns ) * 33px );
	margin-top: var( --pi-space-xs );
}

.px-palette__swatch {
	position: relative;
	aspect-ratio: 1;
	padding: 0;
	border: none;
	cursor: pointer;
}

/* An empty slot is see-through, and shows it */
.px-palette__swatch--empty {
	background-color: var( --pixel-editor-checker-light );
	background-image: repeating-conic-gradient(
		var( --pixel-editor-checker-dark ) 0% 25%, transparent 0% 50%
	);
	background-size: 6px 6px;
}

.px-palette__swatch--selected {
	position: relative;
	z-index: 1;
	outline: 1px solid var( --pi-color-text-bright );
	outline-offset: 1px;
}

.px-palette__actions {
	display: flex;
	gap: var( --pi-space-sm );
	margin-top: var( --pi-space-sm );
}

/* The swatches holding the primary and secondary colors carry their number: 1, 2, or 3 for
   both, white edged in black so it shows on any color */
.px-palette__swatch[data-mark]:not( [data-mark=""] )::after {
	content: attr( data-mark );
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-family: var( --pi-font-family-code );
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	text-shadow:
		-1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------------------
   Layers
   --------------------------------------------------------------------------------------- */

/* Merge down: the icon set's merge arrow points up, so it is turned over to point down into
   the layer below */
.px-layers__merge .ti {
	display: inline-block;
	transform: scaleY( -1 );
}

.px-layers {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.px-layer {
	display: flex;
	align-items: center;
	gap: var( --pi-space-xs );
	padding: var( --pi-space-xs );
	border: 1px solid transparent;
	background-color: var( --pi-color-bg );
}

.px-layer--active {
	border-color: var( --pi-accent-blue );
	background-color: var( --pi-accent-blue-dark );
}

.px-layer__select {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var( --pi-space-sm );
	padding: 0;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
}

.px-layer__thumbnail {
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.px-layer__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The field a layer's name is edited in, standing where the name was */
.px-layer .px-layer__rename {
	flex: 1;
	min-width: 0;
	width: auto;
}

.px-layer__opacity {
	color: var( --pi-color-text-dim );
	font-family: var( --pi-font-family-code );
}

/* ---------------------------------------------------------------------------------------
   Pictures strip
   --------------------------------------------------------------------------------------- */

.px-strip__controls {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var( --pi-space-xs );
	min-width: 200px;
}

.px-strip__controls .px-panel__title {
	margin: 0;
	gap: var( --pi-space-md );
}

.px-strip__row {
	display: flex;
	align-items: center;
	gap: var( --pi-space-sm );
}

.px-strip__row[hidden],
.px-strip__field[hidden] {
	display: none;
}

.px-strip__field,
.px-strip__check {
	display: inline-flex;
	align-items: center;
	gap: var( --pi-space-xs );
}

.px-strip__check input {
	accent-color: var( --pi-accent-blue );
}

.px-strip__playing {
	overflow: hidden;
	color: var( --pi-color-text-dim );
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.px-strip__playing[hidden] {
	display: none;
}

/* The animation playing at the end of the strip */
.px-strip__preview {
	flex: none;
	align-self: center;
	margin-left: auto;
	text-align: center;
}

.px-strip__preview-box {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	background-color: var( --pi-color-bg );
}

.px-strip__preview-canvas {
	image-rendering: pixelated;
}

.px-pictures {
	position: relative;
	display: flex;
	align-items: center;
	gap: var( --pi-space-sm );
	min-width: 0;
	overflow-x: auto;
}

/* A picture being dragged to another place follows the pointer, above the others */
.px-picture--dragging {
	position: relative;
	z-index: 2;
	border-color: var( --pi-nav-active );
	opacity: 0.8;
	cursor: grabbing;
}

.px-pictures--dragging {
	cursor: grabbing;
}

/* The line that shows where the dragged picture will go */
.px-pictures__marker {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 4px;
	background-color: var( --pi-accent-yellow );
	pointer-events: none;
}

.px-pictures__marker[hidden] {
	display: none;
}

.px-picture {
	flex: none;
	padding: var( --pi-space-xs );
	border: 1px solid transparent;
	background-color: var( --pi-color-bg );
	text-align: center;
	cursor: pointer;
}

.px-picture:hover {
	border-color: var( --pi-nav-highlight );
}

.px-picture--active {
	border-color: var( --pi-nav-active );
}

/* The frame the animation is showing */
.px-picture--playing {
	border-color: var( --pi-accent-blue );
	background-color: var( --pi-accent-blue-dark );
}

.px-picture__frame {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
}

.px-picture__thumbnail {
	max-width: 64px;
	max-height: 64px;
}

.px-picture__label {
	display: block;
	color: var( --pi-color-text-dim );
	font-family: var( --pi-font-family-code );
	font-size: 11px;
}

.px-picture--add {
	display: grid;
	place-items: center;
	align-self: center;
	width: 74px;
	height: 88px;
	border: 1px dashed var( --pi-nav-border );
	background: none;
	color: var( --pi-color-text-dim );
}

.px-picture--add:hover {
	color: var( --pi-color-text-bright );
}

/* ---------------------------------------------------------------------------------------
   Status bar
   --------------------------------------------------------------------------------------- */

.px-status__cursor {
	min-width: 96px;
}

.px-status__message {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var( --pi-accent-yellow );
	text-overflow: ellipsis;
}

.px-status__memory {
	margin-left: auto;
}

.px-status__save--error {
	color: var( --pi-accent-light-red );
}

/* A file is being dragged over the editor */
.pixel-editor--dropping .pixel-editor__stage {
	outline: 3px dashed var( --pi-nav-active );
	outline-offset: -6px;
}

/* ---------------------------------------------------------------------------------------
   Dialogs (inside the site's modal)
   --------------------------------------------------------------------------------------- */

.px-dialog .px-field {
	grid-template-columns: 64px 120px auto;
	justify-content: start;
	margin-top: 0;
	margin-bottom: var( --pi-space-sm );
}

.px-dialog input[type="number"] {
	font: inherit;
	color: var( --pi-color-text-bright );
}

.px-dialog__note,
.px-dialog__error {
	margin: var( --pi-space-sm ) 0 0;
	font-size: 14px;
}

.px-dialog__note {
	color: var( --pi-color-text-dim );
}

.px-dialog__note--warning {
	padding-left: var( --pi-space-sm );
	border-left: 3px solid var( --pi-accent-yellow );
	color: var( --pi-accent-yellow );
}

.px-dialog__error:empty {
	display: none;
}

/* These dialogs fill in or change their content after they open, so they are as tall as
   what they hold */
.px-import-modal .pi-modal,
.px-export-modal .pi-modal,
.px-library-modal .pi-modal,
.px-prompt-modal .pi-modal,
.px-confirm-modal .pi-modal {
	height: auto;
	max-height: 70vh;
}

.px-library-modal .pi-modal,
.px-export-modal .pi-modal {
	width: 560px;
	max-width: calc( 100vw - 32px );
}

/* Palettes: one row for each preset, with all of its colors */
/* A fixed size, so switching tabs does not grow or shrink it: the list takes whatever room
   the note, the tabs and the warning leave, and scrolls */
.px-palettes-modal .pi-modal {
	width: 600px;
	max-width: calc( 100vw - 32px );
	height: 600px;
	max-height: calc( 100vh - 48px );
}

.px-palettes-modal .pi-modal-body,
.px-palettes-modal .pi-modal-content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.px-palettes-modal .px-dialog {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.px-palettes-modal .px-dialog > * {
	flex: none;
}

/* A short note above the tabs, set apart with an icon and a colored edge */
.px-palettes__intro {
	display: flex;
	align-items: flex-start;
	gap: var( --pi-space-sm );
	margin: 0 0 var( --pi-space-md );
	padding: var( --pi-space-sm ) var( --pi-space-md );
	border-left: 3px solid var( --pi-accent-blue );
	background-color: var( --pi-color-bg );
	color: var( --pi-color-text );
	font-size: 13px;
	line-height: 1.4;
}

.px-palettes__intro .ti {
	flex: none;
	color: var( --pi-accent-blue );
	font-size: 18px;
}

/* The tabs on the left, the file buttons on the right, over a line the chosen tab joins */
.px-palettes__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --pi-space-sm );
	border-bottom: 1px solid var( --pi-nav-border );
}

.px-palettes__tabs {
	display: flex;
	gap: 2px;
}

.px-palettes__tab {
	display: inline-flex;
	align-items: center;
	gap: var( --pi-space-xs );
	margin-bottom: -1px;
	padding: var( --pi-space-xs ) var( --pi-space-md );
	border: 1px solid transparent;
	border-bottom: none;
	background: none;
	color: var( --pi-color-text-dim );
	font: inherit;
	font-weight: bold;
	cursor: pointer;
}

.px-palettes__tab:hover {
	color: var( --pi-color-text-bright );
}

.px-palettes__tab[aria-selected="true"] {
	border-color: var( --pi-nav-border );
	background-color: var( --pi-color-bg );
	box-shadow: inset 0 2px 0 var( --pi-accent-blue );
	color: var( --pi-color-text-bright );
}

.px-palettes__tab-count {
	min-width: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background-color: var( --pi-color-panel );
	color: var( --pi-color-text );
	font-size: 11px;
	text-align: center;
}

.px-palettes__files {
	display: flex;
	gap: var( --pi-space-sm );
	padding-bottom: var( --pi-space-xs );
}

.px-palettes__files .px-btn {
	font-size: 13px;
	font-weight: normal;
}

/* The chosen tab's palettes; the tabs stay in view while the list scrolls */
.px-palettes-modal .px-palettes__panel {
	flex: 1;
	min-height: 0;
	padding: var( --pi-space-sm ) var( --pi-space-xs ) var( --pi-space-xs ) 0;
	overflow-y: auto;
}

.px-palettes__empty {
	margin: var( --pi-space-lg ) var( --pi-space-md );
	color: var( --pi-color-text-dim );
	text-align: center;
}

.px-palettes {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-xs );
}

.px-palettes__option {
	display: grid;
	grid-template-columns: auto 150px 1fr auto;
	align-items: center;
	gap: var( --pi-space-sm );
	padding: var( --pi-space-xs ) var( --pi-space-sm );
	border: 1px solid transparent;
	background-color: var( --pi-color-bg );
	cursor: pointer;
}

.px-palettes__option:hover {
	border-color: var( --pi-nav-highlight );
}

.px-palettes__option:has( input:checked ) {
	border-color: var( --pi-accent-blue );
}

.px-palettes__option input {
	accent-color: var( --pi-accent-blue );
}

.px-palettes__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.px-palettes__name {
	color: var( --pi-color-text-bright );
	font-weight: bold;
}

.px-palettes__count,
.px-palettes__about {
	color: var( --pi-color-text-dim );
	font-size: 12px;
}

.px-palettes__preview {
	display: grid;
	grid-template-columns: repeat( var( --pixel-editor-palette-columns ), 10px );
	gap: 1px;
}

.px-palettes__color {
	width: 10px;
	height: 10px;
}

.px-palettes__actions {
	display: flex;
	gap: var( --pi-space-xs );
}

/* Help: topics down the left, the chosen topic beside them */
.px-help-modal .pi-modal {
	width: 760px;
	max-width: calc( 100vw - 32px );
	height: auto;
	max-height: 90vh;
}

.px-help {
	display: grid;
	grid-template-columns: 180px minmax( 0, 1fr );
	gap: var( --pi-space-md );
	height: min( 60vh, 520px );
}

.px-help__topics {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
}

.px-help__topic {
	padding: var( --pi-space-xs ) var( --pi-space-sm );
	border: 1px solid transparent;
	background: none;
	color: var( --pi-color-text );
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.px-help__topic:hover {
	border-color: var( --pi-nav-highlight );
}

.px-help__topic[aria-selected="true"] {
	border-color: var( --pi-accent-blue );
	background-color: var( --pi-accent-blue-dark );
	color: var( --pi-color-text-bright );
}

.px-help__page {
	padding-right: var( --pi-space-sm );
	overflow-y: auto;
	line-height: 1.5;
}

.px-help__title {
	margin: 0 0 var( --pi-space-sm );
	color: var( --pi-color-text-bright );
	font-size: 18px;
}

.px-help__page p {
	margin: 0 0 var( --pi-space-sm );
}

.px-help__list {
	margin: 0 0 var( --pi-space-sm );
	padding-left: 20px;
}

.px-help__list li {
	margin-bottom: var( --pi-space-xs );
}

.px-help__list strong {
	color: var( --pi-color-text-bright );
}

.px-help__group {
	margin: var( --pi-space-md ) 0 var( --pi-space-xs );
	color: var( --pi-color-text-dim );
	font-size: 12px;
	text-transform: uppercase;
}

.px-help__table {
	width: 100%;
	border-collapse: collapse;
}

.px-help__table th,
.px-help__table td {
	padding: 2px var( --pi-space-sm ) 2px 0;
	border-bottom: 1px solid var( --pi-color-bg );
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

.px-help__table th {
	width: 40%;
	white-space: nowrap;
}

.px-help__table kbd {
	color: var( --pi-color-text-bright );
	font-family: var( --pi-font-family-code );
	font-size: 12px;
}

.px-dialog [hidden] {
	display: none;
}

.px-dialog input[type="number"],
.px-dialog input[type="text"] {
	width: 100%;
	padding: 2px var( --pi-space-xs );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
	color: var( --pi-color-text-bright );
	font: inherit;
}

.px-dialog input[type="checkbox"] {
	accent-color: var( --pi-accent-blue );
}

.px-dialog__text {
	margin: 0 0 var( --pi-space-sm );
}

/* A label with a field that takes the rest of the row */
.px-dialog .px-field--wide {
	grid-template-columns: 96px minmax( 0, 1fr );
}

/* Import and export */
/* The import dialog: the preview and settings, and beside them every frame and the chosen
   frame's details. The preview shades the frames in two purples, checkerboard fashion. */
.px-import-modal .pi-modal {
	width: 760px;
	max-width: calc( 100vw - 32px );
	max-height: 90vh;
}

.px-import {
	--px-import-shade: rgba( 38, 12, 72, 0.85 );
	--px-import-shade-alt: rgba( 104, 26, 208, 0.8 );
	--px-import-edge: rgba( 20, 6, 40, 0.9 );
	--px-import-chosen: #d0d0d0;
	display: flex;
	align-items: flex-start;
	gap: var( --pi-space-md );
}

.px-import__main {
	flex: 1 1 440px;
	min-width: 0;
}

.px-import__side {
	display: flex;
	flex: 0 0 220px;
	flex-direction: column;
	gap: var( --pi-space-sm );
	min-width: 0;
}

.px-import__side-title {
	margin: 0;
	color: var( --pi-color-text-dim );
	font-size: 13px;
	font-weight: bold;
}

.px-import__frames {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 52px, 1fr ) );
	gap: var( --pi-space-xs );
	max-height: 300px;
	padding: var( --pi-space-xs );
	overflow-y: auto;
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
}

.px-import__frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid transparent;
	background: none;
	color: var( --pi-color-text-dim );
	font-size: 11px;
	cursor: pointer;
}

.px-import__frame:hover {
	color: var( --pi-color-text-bright );
}

.px-import__frame[aria-selected="true"] {
	border-color: var( --pi-accent-blue );
	color: var( --pi-color-text-bright );
}

.px-import__thumbnail {
	display: block;
	image-rendering: pixelated;
}

.px-import__details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px var( --pi-space-sm );
	margin: 0;
	font-size: 12px;
}

.px-import__details dt {
	color: var( --pi-color-text-dim );
}

.px-import__details dd {
	margin: 0;
	font-family: var( --pi-font-family-code );
}

.px-import__options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --pi-space-sm ) var( --pi-space-md );
	margin-bottom: var( --pi-space-sm );
}

.px-import__options .px-check {
	margin: 0;
}

.px-field--disabled label {
	opacity: 0.5;
}

@media ( max-width: 720px ) {
	.px-import {
		flex-direction: column;
	}

	.px-import__side {
		flex-basis: auto;
		width: 100%;
	}
}

.px-import__preview {
	display: block;
	max-width: 100%;
	margin: 0 auto var( --pi-space-sm );
	border: 1px solid var( --pi-nav-border );
	cursor: pointer;
}

.px-import__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var( --pi-space-md );
}

.px-import__sheet,
.px-export__sheet,
.px-export .px-field--wide {
	margin-top: var( --pi-space-sm );
}

.px-export__sheet {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-sm );
}

.px-export__sheet[hidden],
.px-export__differ[hidden] {
	display: none;
}

/* The spritesheet's options, a row or two of compact fields */
.px-sheet__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --pi-space-sm ) var( --pi-space-lg );
}

.px-sheet__group {
	display: inline-flex;
	align-items: center;
	gap: var( --pi-space-sm );
}

.px-sheet__label {
	white-space: nowrap;
}

.px-sheet__unit {
	color: var( --pi-color-text-dim );
	font-size: 13px;
}

.px-sheet__layout .px-segment__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var( --pi-space-xs );
	padding: 2px var( --pi-space-sm );
}

.px-dialog .px-sheet__margin {
	width: 64px;
}

.px-sheet__check {
	display: inline-flex;
	align-items: center;
	gap: var( --pi-space-xs );
	cursor: pointer;
}

/* The spritesheet as it will be, in a box of a fixed size so the dialog keeps its size */
.px-export__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	overflow: hidden;
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-color-bg );
}

.px-export__preview-canvas {
	display: block;
	flex: none;
	image-rendering: pixelated;
}

/* The loadSpritesheet call that reads the sheet */
.px-export__load {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-xs );
	margin: 0;
}

.px-export__load-code {
	padding: var( --pi-space-xs ) var( --pi-space-sm );
	overflow-wrap: anywhere;
	background-color: var( --pi-code-bg );
	color: var( --pi-color-text-bright );
	font-family: var( --pi-font-family-code );
	font-size: 12px;
	user-select: all;
}

/* A linked project's Pi.js image: its files, and making these options its own */
.px-export__linked {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --pi-space-xs );
	padding-top: var( --pi-space-sm );
	border-top: 1px solid var( --pi-nav-border );
}

.px-export__linked .px-pijs__files {
	align-self: stretch;
}

.px-export__differ {
	margin: 0;
}

/* The Pi.js code's options, a label beside each row of choices */
.px-export__code-options {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-sm );
	margin: var( --pi-space-sm ) 0;
}

.px-export__option {
	display: grid;
	grid-template-columns: 64px 1fr;
	align-items: center;
	gap: var( --pi-space-sm );
}

.px-export__option[hidden],
.px-export__code-options[hidden] {
	display: none;
}

.px-export__option-label {
	color: var( --pi-color-text-dim );
	font-size: 13px;
}

.px-export__code {
	display: block;
	width: 100%;
	height: 220px;
	margin-top: var( --pi-space-sm );
	padding: var( --pi-space-sm );
	border: 1px solid var( --pi-nav-border );
	background-color: var( --pi-code-bg );
	color: var( --pi-color-text-bright );
	font-family: var( --pi-font-family-code );
	font-size: 12px;
	white-space: pre;
	resize: vertical;
}

/* Project library: two tabs, the projects made here and the Pi.js spritesheets. The tabs
   are styled as the Palettes dialog's. */
.px-library__tabs {
	margin-bottom: var( --pi-space-sm );
	border-bottom: 1px solid var( --pi-nav-border );
}

.px-library {
	display: flex;
	flex-direction: column;
	gap: var( --pi-space-xs );
	margin: 0;
	padding: 0;
	list-style: none;
}

.px-library__row {
	display: flex;
	align-items: center;
	gap: var( --pi-space-sm );
	padding: var( --pi-space-xs );
	border: 1px solid transparent;
	background-color: var( --pi-color-bg );
}

.px-library__row--open {
	border-color: var( --pi-accent-blue );
}

.px-library__thumbnail {
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.px-library__text {
	flex: 1;
	min-width: 0;
}

.px-library__name {
	display: block;
	overflow: hidden;
	color: var( --pi-color-text-bright );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.px-library__details {
	color: var( --pi-color-text-dim );
}

.px-library__actions {
	display: flex;
	gap: var( --pi-space-xs );
}

/* ---------------------------------------------------------------------------------------
   Narrow windows

   The editor is made for a desktop window. In a narrow one the tool grid cannot shrink
   without spoiling its icons, so room for the canvas is found elsewhere: the bar's
   buttons lose their words, and the color and layers panel gets slimmer. Narrower still,
   the editor keeps a least width and the page scrolls sideways.
   --------------------------------------------------------------------------------------- */

/* The bar runs out of room first: with their words, its buttons need about 1100px */
@media ( max-width: 1140px ) {

	/* The words stay for screen readers; the icons carry the tips */
	.pixel-editor__bar .px-btn > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.pixel-editor__bar .px-btn {
		padding: var( --pi-space-xs );
	}

	.px-bar__project-name {
		max-width: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media ( max-width: 1000px ) {
	.pixel-editor {
		--pixel-editor-side-right: 216px;
	}

	.px-palette__actions {
		flex-wrap: wrap;
		gap: var( --pi-space-xs );
	}

	.px-strip__controls {
		min-width: 0;
	}
}

/* Closer together, the bar's buttons still fit on one row at the least width */
@media ( max-width: 860px ) {
	.pixel-editor__bar {
		gap: var( --pi-space-xs );
	}
}

@media ( max-width: 760px ) {
	.pixel-editor--app {
		min-width: 760px;
	}
}