/**
 * Styles for the Clean & Recycle blocks and the "What's new" popup.
 *
 * Colours are read from the theme's presets with fallbacks, so the blocks
 * still look intentional under another block theme.
 */

:root {
	--crb-primary: var(--wp--preset--color--primary, #047857);
	--crb-on-primary: var(--wp--preset--color--on-primary, #fff);
	--crb-base: var(--wp--preset--color--base, #fff);
	--crb-surface: var(--wp--preset--color--surface, #f8fafc);
	--crb-contrast: var(--wp--preset--color--contrast, #0f172a);
	--crb-text: var(--wp--preset--color--foreground, #334155);
	--crb-muted: var(--wp--preset--color--muted, #475569);
	--crb-dimmed: var(--wp--preset--color--dimmed, #64748b);
	--crb-border: var(--wp--preset--color--border, #e2e8f0);
	--crb-radius: var(--wp--custom--radius, 0.625rem);
	--crb-soft: color-mix(in srgb, var(--crb-primary) 10%, transparent);
	--crb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ icons */

.cr-icon { display: inline-flex; line-height: 0; }
.cr-svg { width: 1em; height: 1em; flex: none; }

/* ------------------------------------------------------- shared controls */

.cr-iconbtn {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--crb-radius);
	background: transparent;
	color: var(--crb-contrast);
	font-size: 1.25rem;
	cursor: pointer;
	transition: background-color 150ms;
}

.cr-iconbtn:hover { background: var(--crb-surface); }
.cr-iconbtn.is-outline { width: 2rem; height: 2rem; font-size: 1rem; box-shadow: inset 0 0 0 1px var(--crb-border); }
.cr-iconbtn[hidden] { display: none; }

.cr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--crb-primary);
	border-radius: var(--crb-radius);
	background: var(--crb-primary);
	color: var(--crb-on-primary);
	font: inherit;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms, opacity 150ms;
}

.cr-button:hover { background: color-mix(in srgb, var(--crb-primary) 88%, var(--crb-contrast)); }
.cr-button:disabled { opacity: 0.6; cursor: progress; }
.cr-button .cr-svg { font-size: 1rem; }

.cr-button.is-outline { background: transparent; color: var(--crb-contrast); border-color: color-mix(in srgb, var(--crb-border) 100%, var(--crb-contrast) 15%); }
.cr-button.is-outline:hover { background: var(--crb-surface); }
.cr-button.is-outline:disabled { opacity: 0.4; cursor: not-allowed; }

.cr-button.is-soft { background: var(--crb-soft); border-color: transparent; color: var(--crb-primary); }
.cr-button.is-soft:hover { background: color-mix(in srgb, var(--crb-primary) 18%, transparent); }

.cr-textbtn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.5rem;
	border: 0;
	border-radius: 0.375rem;
	background: none;
	color: var(--crb-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.cr-textbtn:hover { background: var(--crb-surface); }

.cr-when-paused { display: none; }
[aria-pressed="true"] > .cr-when-paused { display: block; }
[aria-pressed="true"] > .cr-when-playing { display: none; }

.cr-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	border-radius: 0.375rem;
	background: var(--crb-soft);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crb-primary) 25%, transparent);
	color: var(--crb-primary);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
}

.cr-chip {
	padding: 0.375rem 0.75rem;
	border: 0;
	border-radius: var(--crb-radius);
	background: var(--crb-surface);
	box-shadow: inset 0 0 0 1px var(--crb-border);
	color: var(--crb-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.cr-chip:hover { color: var(--crb-contrast); }
.cr-chip[aria-pressed="true"] { background: var(--crb-primary); box-shadow: none; color: var(--crb-on-primary); }

/* ------------------------------------------------------------------ brand */

.cr-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	border-radius: 0.375rem;
	color: var(--crb-contrast);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.cr-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	background: var(--crb-primary);
	color: var(--crb-on-primary);
	font-size: 1.25rem;
}

.cr-brand__name { font-size: 1.125rem; white-space: nowrap; }
.cr-brand.is-lg .cr-brand__mark { width: 2.75rem; height: 2.75rem; font-size: 1.5rem; }
.cr-brand.is-lg .cr-brand__name { font-size: 1.25rem; }

.cr-brand__logo { display: block; width: auto; height: 2.25rem; object-fit: contain; }
.cr-brand.is-lg .cr-brand__logo { height: 3rem; }
.cr-brand__logo.is-dark { display: none; }

html[data-mode="dark"] .cr-brand__logo.is-light { display: none; }
html[data-mode="dark"] .cr-brand__logo.is-dark { display: block; }

@media (prefers-color-scheme: dark) {
	html:not([data-mode="light"]) .cr-brand__logo.is-light { display: none; }
	html:not([data-mode="light"]) .cr-brand__logo.is-dark { display: block; }
}

/* ------------------------------------------------------ header buttons */

.cr-whats-new__count {
	position: absolute;
	top: 0.125rem;
	right: 0.125rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.25rem;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--crb-primary);
	color: var(--crb-on-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.125rem;
	text-align: center;
}

.cr-whats-new__count[hidden] { display: none; }

.cr-mode .cr-svg { display: none; }
.cr-mode:not([data-state]) .cr-mode__system,
.cr-mode[data-state="system"] .cr-mode__system,
.cr-mode[data-state="light"] .cr-mode__light,
.cr-mode[data-state="dark"] .cr-mode__dark { display: block; }

/* --------------------------------------------------------------- carousel */

.cr-carousel__slides { display: grid; }

/* Stacked in one grid cell, so the tallest slide sets the height and the
   page below never jumps when a shorter slide comes in. */
.cr-carousel.is-ready .cr-carousel__slides > .cr-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 500ms var(--crb-ease), visibility 0s linear 500ms;
}

.cr-carousel.is-ready .cr-carousel__slides > .cr-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms var(--crb-ease), visibility 0s;
}

/* Before the script runs, show the first slide only. */
.cr-carousel:not(.is-ready):not(.is-editing) .cr-slide + .cr-slide { display: none; }

.cr-carousel__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.cr-carousel__controls[hidden] { display: none; }
.cr-carousel__arrows { display: flex; gap: 0.25rem; }
.cr-carousel__dots { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }

/* 24px hit area around a 12px dot (WCAG 2.5.8). */
.cr-carousel__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.cr-carousel__dot::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 999px;
	background: var(--crb-border);
	transition: background-color 150ms, transform 150ms;
}

.cr-carousel__dot:hover::before { background: color-mix(in srgb, var(--crb-primary) 60%, var(--crb-border)); }
.cr-carousel__dot[aria-current="true"]::before { background: var(--crb-primary); transform: scale(1.15); }
.cr-carousel__count { margin: 0; color: var(--crb-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* In the editor, slides stack with a divider so each one can be edited. */
.cr-carousel.is-editing .cr-slide + .cr-slide { margin-top: 2rem; padding-top: 2rem; border-top: 2px dashed var(--crb-border); }
.cr-editor-label { margin: 0 0 0.5rem; padding: 0.5rem 1rem; color: var(--crb-muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* --------------------------------------------------------------- projects */

.cr-projects__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 3rem; }
.cr-projects__filters[hidden] { display: none; }

.cr-projects__grid { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cr-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cr-projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cr-projects__grid > li[hidden] { display: none; }

.cr-project {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--crb-surface) 40%, transparent);
	box-shadow: inset 0 0 0 1px var(--crb-border);
	transition: transform 300ms var(--crb-ease), box-shadow 300ms var(--crb-ease);
}

.cr-project:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crb-primary) 40%, transparent), 0 12px 24px -8px rgb(15 23 42 / 0.15);
}

.cr-project__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--crb-soft); }
.cr-project__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--crb-ease); }
.cr-project:hover .cr-project__media img { transform: scale(1.05); }

.cr-project__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.cr-project__body > * { margin: 0; }
.cr-project__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cr-project__year { color: var(--crb-dimmed); font-size: 0.75rem; }
.cr-project__title { margin-top: 0.75rem !important; color: var(--crb-contrast); font-size: 1.125rem; line-height: 1.35; }
.cr-project__client { margin-top: 0.25rem !important; color: var(--crb-dimmed); font-size: 0.875rem; }
.cr-project__summary { flex: 1; margin-top: 0.75rem !important; color: var(--crb-muted); font-size: 0.875rem; line-height: 1.65; }

.cr-project__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 1.25rem !important;
	padding-top: 1rem;
	border-top: 1px solid var(--crb-border);
}

.cr-project__metrics > div { display: flex; flex-direction: column-reverse; }
.cr-project__metrics dt { color: var(--crb-dimmed); font-size: 0.75rem; }
.cr-project__metrics dd { margin: 0; color: var(--crb-primary); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.cr-projects__empty { color: var(--crb-muted); text-align: center; }

/* ------------------------------------------------------------ contact form */

.cr-form { display: flex; flex-direction: column; gap: 1.25rem; }
.cr-form[hidden], .cr-form-success[hidden] { display: none; }
.cr-form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .cr-form__row { grid-template-columns: 1fr 1fr; } }

.cr-field { display: flex; flex-direction: column; gap: 0.375rem; }
.cr-field > label { color: var(--crb-contrast); font-size: 0.875rem; font-weight: 500; }
.cr-field__req { color: #dc2626; }
.cr-field__opt { color: var(--crb-dimmed); font-weight: 400; }

.cr-field :is(input, select, textarea) {
	width: 100%;
	box-sizing: border-box;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--crb-border);
	border-radius: var(--crb-radius);
	background: var(--crb-base);
	color: var(--crb-contrast);
	font: inherit;
	font-size: 1rem; /* 16px stops iOS zooming into the field. */
	transition: border-color 150ms, box-shadow 150ms;
}

.cr-field textarea { resize: vertical; min-height: 9rem; }
.cr-field :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--crb-border) 100%, var(--crb-contrast) 20%); }

.cr-field :is(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--crb-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--crb-primary) 25%, transparent);
}

.cr-field [aria-invalid="true"] { border-color: #dc2626; }
.cr-field__error { margin: 0; color: #dc2626; font-size: 0.8125rem; }
html[data-mode="dark"] .cr-field__error, html[data-mode="dark"] .cr-field__req { color: #f87171; }
.cr-field__error[hidden] { display: none; }

.cr-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cr-form__note { margin: 0; color: var(--crb-dimmed); font-size: 0.8125rem; }

.cr-alert {
	padding: 0.875rem 1rem;
	border-radius: var(--crb-radius);
	background: color-mix(in srgb, #dc2626 10%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc2626 30%, transparent);
	color: var(--crb-contrast);
	font-size: 0.875rem;
}

.cr-alert[hidden] { display: none; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.cr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cr-form-success {
	padding: 2rem;
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--crb-primary) 5%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crb-primary) 30%, transparent);
	text-align: center;
}

.cr-form-success:focus { outline: none; }
.cr-form-success > * { margin: 0; }
.cr-form-success h3 { margin-top: 1.25rem; font-size: 1.125rem; }
.cr-form-success p { margin-top: 0.5rem; color: var(--crb-muted); font-size: 0.875rem; }
.cr-form-success .cr-button { margin-top: 1.5rem; }

.cr-form-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: var(--crb-primary);
	color: var(--crb-on-primary);
	font-size: 1.5rem;
}

/* ------------------------------------------------------- What's new popup */

html.cr-modal-open { overflow: hidden; }

.cr-updates {
	position: fixed;
	inset: 0;
	width: 100dvw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--crb-base);
	color: var(--crb-text);
	overflow: hidden;
}

.cr-updates:focus { outline: none; }
.cr-updates::backdrop { background: rgb(2 6 23 / 0.5); }
.cr-updates[open] { display: flex; }

.cr-updates__shell {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.cr-updates__wash { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.cr-updates__wash::before,
.cr-updates__wash::after {
	content: "";
	position: absolute;
	border-radius: 999px;
	filter: blur(64px);
}

.cr-updates__wash::before { top: -10rem; right: -8rem; width: 36rem; height: 36rem; background: var(--crb-soft); }
.cr-updates__wash::after { bottom: -12rem; left: -10rem; width: 32rem; height: 32rem; background: color-mix(in srgb, var(--wp--custom--secondary, #3b82f6) 10%, transparent); }

.cr-updates__head,
.cr-updates__stage,
.cr-updates__nav {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1rem;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.cr-updates__head, .cr-updates__stage, .cr-updates__nav { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
	.cr-updates__head, .cr-updates__stage, .cr-updates__nav { padding-inline: 2.5rem; }
}

.cr-updates__head { flex: none; padding-top: max(0.75rem, env(safe-area-inset-top)); }
@media (min-width: 1024px) { .cr-updates__head { padding-top: 1.5rem; } }

.cr-updates__bars { display: flex; gap: 0.25rem; }

/* Each bar is a 24px-tall button around a 4px track: a comfortable target without looking chunky. */
.cr-updates__bar {
	display: flex;
	flex: 1;
	min-width: 0;
	height: 1.5rem;
	align-items: center;
	padding: 0;
	border: 0;
	border-radius: 0.125rem;
	background: none;
	cursor: pointer;
}

.cr-updates__track {
	position: relative;
	width: 100%;
	height: 0.25rem;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--crb-border) 100%, var(--crb-contrast) 12%);
}

.cr-updates__fill {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--crb-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms;
}

.cr-updates__fill.is-done { transform: scaleX(1); }
.cr-updates__fill.is-running { transition: none; animation: cr-progress linear forwards; }
.cr-updates.is-paused .cr-updates__fill.is-running { animation-play-state: paused; }

@keyframes cr-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.cr-updates__titlebar { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }

.cr-updates__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	border-radius: 999px;
	background: var(--crb-soft);
	color: var(--crb-primary);
	font-size: 1.25rem;
}

.cr-updates__heading { flex: 1; min-width: 0; }
.cr-updates__heading h2 { margin: 0; overflow: hidden; color: var(--crb-contrast); font-size: 1rem; font-weight: 600; letter-spacing: normal; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cr-updates__count { margin: 0; color: var(--crb-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.cr-updates__stage {
	display: flex;
	flex: 1;
	min-height: 0;
	padding-block: 0.75rem;
}

@media (min-width: 1024px) { .cr-updates__stage { padding-block: 1.25rem; } }

/* One update. Phones: photo on top taking the spare height, text below.
   Laptops and landscape phones: photo and text side by side. */
.cr-update {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	overflow-y: auto;
	border-radius: 1rem;
	background: var(--crb-base);
	box-shadow: 0 0 0 1px var(--crb-border), 0 20px 40px -16px rgb(15 23 42 / 0.25);
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.cr-update[hidden] { display: none; }

.cr-update__media {
	position: relative;
	flex: 1 0 max(34dvh, 12rem);
	overflow: hidden;
	background: var(--crb-surface);
}

.cr-update__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

.cr-update__poster {
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	padding: 1.5rem;
	box-sizing: border-box;
	background: var(--crb-primary);
	color: var(--crb-on-primary);
}

@media (min-width: 640px) { .cr-update__poster { padding: 2.5rem; } }
@media (min-width: 1024px) { .cr-update__poster { padding: 3.5rem; } }

.cr-update__circle { position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 999px; background: color-mix(in srgb, var(--crb-base) 10%, transparent); }
.cr-update__circle.is-a { top: -15%; right: -10%; width: 60%; }
.cr-update__circle.is-b { bottom: -25%; left: -10%; width: 55%; }
.cr-update__poster-icon { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 1.75rem; opacity: 0.4; }
@media (min-width: 640px) { .cr-update__poster-icon { top: 2rem; right: 2rem; font-size: 2.25rem; } }

.cr-update__poster-title {
	max-width: 18ch;
	margin: 0;
	color: inherit;
	font-size: clamp(1.875rem, 1.2rem + 3vw, 3.75rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.cr-update__details {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
}

@media (min-width: 640px) { .cr-update__details { padding: 2rem; } }
.cr-update__details > * { margin: 0; }

.cr-update__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.cr-update__meta .cr-badge { font-size: 0.875rem; padding: 0.125rem 0.625rem; }
.cr-update__meta time { color: var(--crb-muted); font-size: 0.875rem; }

.cr-update__title { color: var(--crb-contrast); font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.cr-update__body { color: var(--crb-text); font-size: 1rem; line-height: 1.65; text-wrap: pretty; }
.cr-update__action .cr-button { padding: 0.75rem 1.25rem; }

@media (min-width: 1024px) {
	.cr-update {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		overflow: hidden;
	}

	.cr-update__media { min-height: 0; }
	.cr-update__details { justify-content: center; padding: 3rem; overflow-y: auto; }
	.cr-update__body { font-size: 1.125rem; }
}

/* A phone on its side: wide but very short. Side by side keeps the text above the fold. */
@media (max-height: 32rem) and (min-width: 36rem) {
	.cr-update { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
	.cr-update__media { min-height: 0; }
	.cr-update__poster { padding: 1.5rem; }
	.cr-update__poster-title { font-size: 1.5rem; }
	.cr-update__details { overflow-y: auto; padding: 1.25rem; justify-content: center; }
	.cr-update__title { font-size: 1.125rem; }
	.cr-update__body { font-size: 0.875rem; }
}

.cr-updates__nav {
	display: flex;
	flex: none;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

@media (min-width: 1024px) { .cr-updates__nav { padding-bottom: 1.5rem; } }
.cr-updates__nav .cr-button { min-width: 8rem; }

@media (prefers-reduced-motion: reduce) {
	.cr-carousel.is-ready .cr-carousel__slides > .cr-slide,
	.cr-project, .cr-project__media img, .cr-updates__fill { transition: none; }
}

/* ------------------------------------------------------------- editor UI */

.cr-icon-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
	gap: 0.25rem;
	max-height: 18rem;
	margin-top: 0.75rem;
	overflow-y: auto;
}

.cr-icon-picker__item { justify-content: center; }
.cr-icon-picker__item.is-selected { box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color, #3858e9); }
.cr-logo-field { margin-bottom: 1rem; }
.cr-logo-field p { margin: 0 0 0.5rem; }
.cr-editor-preview { pointer-events: none; }