:root {
	--ink: #1f1f1d;
	--chrome-dark: #1D1D1F;
	--dock-bg: #ffffff;
	--dock-border: #e3e3e8;
	--dock-pad: 6px;
	--chip: #c9c9d1;
	--chip-hover: #a9a9b3;
	--divider: #dcdce1;
	--focus: #0a84ff;
	--edge: 20px;
	--rainbow: conic-gradient(from 90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #af52de, #ff2d55, #ff3b30);
}

html, body {
	height: 100%;
	touch-action: none;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	overflow: hidden;
	background: #fff;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

#skrblz {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	cursor: url('../img/cursor.svg') 14 14, crosshair;
	touch-action: none;
}

/* Header */

.toolbar {
	position: fixed;
	z-index: 10;
	top: max(var(--edge), env(safe-area-inset-top));
	left: 0;
	right: 0;
	margin-inline: auto;
	width: fit-content;
	height: 60px;
	display: flex;
	align-items: center;
	background-color: var(--chrome-dark);
	border-radius: 100px;
	padding: 0 20px;
	box-shadow:
	  0 1px 1px hsl(0deg 0% 0% / 0.075),
	  0 2px 2px hsl(0deg 0% 0% / 0.075),
	  0 4px 4px hsl(0deg 0% 0% / 0.075),
	  0 8px 8px hsl(0deg 0% 0% / 0.075),
	  0 16px 16px hsl(0deg 0% 0% / 0.075)
	;
}

#logo-container {
	display: flex;
	align-items: center;
	min-width: 0;
}

#icon { margin-right: 8px; }

#beta {
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .75px;
	color: #f49dff;
	border: 1px solid #f49dff;
	border-radius: 4px;
	padding: 1px 4px;
	margin-left: 8px;
}

/* Dock */

.dock {
	--gap: 20px;
	position: fixed;
	z-index: 10;
	left: 50%;
	bottom: max(var(--edge), env(safe-area-inset-bottom));
	transform: translateX(-50%);
	width: max-content;
	display: flex;
	align-items: center;
	padding: var(--dock-pad);
	background: var(--dock-bg);
	border: 1px solid var(--dock-border);
	border-radius: 999px;
	box-shadow:
	  0 1px 2px hsl(240deg 5% 20% / 0.06),
	  0 4px 12px hsl(240deg 5% 20% / 0.08);
}

.dock-item {
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	height: 36px;
	padding: 0 calc(var(--gap) / 2);
	border: 0;
	border-radius: 12px;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dock-item:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}

.dock-divider {
	width: 2px;
	height: 20px;
	margin: 0 calc(var(--gap) / 2);
	border-radius: 2px;
	background: var(--divider);
}

.dock-item[data-size="small"] { margin-left: calc(var(--gap) / -8); }
.dock-item[data-size="large"] { margin-right: calc(var(--gap) * 3 / 16); }

.dock-item--icon + .dock-item--icon { margin-left: 4px; }

@media screen and (max-width: 420px) {
	.dock { --gap: 16px; }
}

@media (pointer: coarse) {
	.dock-item { height: 44px; }
}

/* Swatches */

.swatch {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.swatch--ink { background: var(--ink); }

.swatch--rainbow {
	--ring: var(--rainbow);
	background:
	  radial-gradient(circle, rgb(255 255 255 / 0.85) 0%, rgb(255 255 255 / 0) 62%),
	  var(--rainbow);
}

.dock-item:hover > .swatch,
.palette-item:hover > .swatch { transform: scale(1.08); }

.dock-item[aria-pressed="true"] > .swatch,
.palette-item[aria-pressed="true"] > .swatch { transform: none; }

[aria-pressed="true"] > .swatch--ink,
[aria-pressed="true"] > .size {
	box-shadow: 0 0 0 3px var(--dock-bg), 0 0 0 5.5px var(--ink);
}

:is(#color-slot, .palette-item)[aria-pressed="true"] > .swatch {
	box-shadow: 0 0 0 var(--ring-gap, 3px) var(--dock-bg);
}

:is(#color-slot, .palette-item)[aria-pressed="true"] > .swatch::before {
	content: "";
	position: absolute;
	inset: calc(-1 * (var(--ring-gap, 3px) + var(--ring-width, 2.5px)));
	border-radius: 50%;
	background: var(--ring, var(--ink));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-width, 2.5px)), #000 calc(100% - var(--ring-width, 2.5px) + 0.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-width, 2.5px)), #000 calc(100% - var(--ring-width, 2.5px) + 0.5px));
	pointer-events: none;
}

/* Size chips */

.size {
	display: block;
	background: var(--chip);
	transition: background-color 120ms ease-out, box-shadow 120ms ease-out;
}

.size--small { width: 14px; height: 6px; border-radius: 3px; }
.size--medium { width: 20px; height: 9px; border-radius: 4px; }
.size--large { width: 27px; height: 18px; border-radius: 6px; }

.dock-item:hover > .size { background: var(--chip-hover); }
.dock-item[aria-pressed="true"] > .size { background: var(--ink); }

/* Undo, clear, export */

.dock-item--icon {
	color: #48484a;
	transition: color 120ms ease-out, transform 120ms ease-out;
}

.dock-item--icon:hover { color: var(--ink); }
.dock-item--icon:active { transform: scale(0.9); }

.dock-item--icon[aria-disabled="true"] {
	color: #c7c7cc;
	cursor: default;
	transform: none;
}

.icon { display: block; }

/* Color popover */

.color-picker {
	position: relative;
	display: flex;
}

.color-picker.is-open .tip { display: none; }

.palette {
	--popover-gap: 12px;
	position: absolute;
	left: 50%;
	/* measured from the dock's edge, not the swatch's: + dock padding + border */
	bottom: calc(100% + var(--popover-gap) + var(--dock-pad) + 1px);
	/* --shift keeps it on-screen; set in js.js */
	transform: translateX(calc(-50% + var(--shift, 0px)));
	transform-origin: 50% 100%;
	display: grid;
	grid-template-columns: repeat(4, 30px);
	gap: 4px;
	padding: 10px;
	background: var(--dock-bg);
	border: 1px solid var(--dock-border);
	border-radius: 12px;
	box-shadow:
	  0 1px 2px hsl(240deg 5% 20% / 0.06),
	  0 4px 12px hsl(240deg 5% 20% / 0.08);
	animation: palette-in 140ms ease-out;
}

.palette[hidden] { display: none; }

@keyframes palette-in {
	from { opacity: 0; transform: translateX(calc(-50% + var(--shift, 0px))) translateY(4px) scale(0.97); }
}

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

.palette-item {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.palette-item:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}

/* 1.2× on touch screens */
@media (pointer: coarse) {
	.palette {
		grid-template-columns: repeat(4, 36px);
		gap: 5px;
		padding: 12px;
		border-radius: 14px;
	}
	.palette-item {
		width: 36px;
		height: 36px;
		--ring-gap: 3.6px;
		--ring-width: 3px;
	}
	.palette-item > .swatch { width: 26px; height: 26px; }
}

/* Tooltips */

.tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 5px 5px 10px;
	border-radius: 9px;
	background: var(--ink);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.tip kbd {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 22px;
	padding: 0 5px;
	border-radius: 5px;
	background: rgb(255 255 255 / 0.2);
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 13px;
}

@media (hover: hover) {
	.dock-item:hover > .tip {
		opacity: 1;
		transform: translate(-50%, 0);
		transition-delay: 350ms;
	}
}

.dock-item:focus-visible > .tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

body.is-drawing .tip { opacity: 0 !important; transition-delay: 0s !important; }

/* Made by */

#made-by {
	z-index: 9999;
	position: fixed;
	left: var(--edge);
	bottom: max(var(--edge), env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.avatar-frame {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #e5e5ea;
}

#avatar {
	width: 32px;
	height: 32px;
	object-fit: cover;
}

#right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

#made-by .small { font-size: 11px; font-weight: 500; color: #8e8e93; }
#made-by h5.small { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }

#made-by a {
	pointer-events: auto;
	cursor: pointer;
	color: inherit;
	text-decoration: underline;
}

#made-by a:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: 3px;
}

@media screen and (max-width: 640px) {
	#made-by { display: none; }
}