/* ── Character Viewer — exact reference implementation ──────────────────────── */
.collection__character-set {
	position: relative;
	border-top-color: transparent;
	padding-top: 60px;
	padding-left: var(--site-side-padding, 25px);
	padding-right: var(--site-side-padding, 25px);
	max-width: calc(
		var(--site-max-width, 1600px) + 2 *
			var(--site-side-padding, 25px)
	);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.collection__character-set::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--site-side-padding, 25px);
	left: var(--site-side-padding, 25px);
	border-top: 1px solid #000000;
}

.character-viewer {
	--size: calc(var(--monitor-width) * 1 / 2);
	--half-gap: calc(var(--line-gap) / 2);
	--scale: calc(var(--size) / var(--units-per-em));
	font-size: 1rem;
	line-height: normal;
	font-family: var(--wp--preset--font-family--roboto-mono, 'Roboto Mono', monospace);
}
.character-viewer__character-map {
	margin-bottom: 30px;
	grid-gap: 30px;
	grid-template-columns: minmax(0, min(40%, 500px)) auto;
	display: grid;
	position: relative;
}
@media screen and (min-width: 600px) {
	.character-viewer__character-map {
		margin-bottom: 120px;
	}
}
@media screen and (max-width: 599px) {
	.character-viewer__character-map {
		grid-template-columns: auto;
	}
	.character-viewer__monitor {
		display: none;
	}
}
.character-viewer__monitor__container {
	top: calc(var(--domi-sticky-offset, 0px) + var(--domi-space-4, 1.5rem));
	position: sticky;
}
.character-viewer__monitor__character-container {
	height: calc(
		1px *
			(var(--ascender) - var(--descender) + var(--line-gap)) *
			var(--scale)
	);
	margin-bottom: 32px;
	position: relative;
}
.character-viewer__monitor__character {
	font-size: calc(1px * var(--size));
	text-align: center;
	white-space: pre;
	z-index: 1;
	line-height: 1;
	position: absolute;
	/* Align the glyph's baseline with the baseline metric line: with line-height: 1 the
	   glyph baseline sits (ascent + leading/2) below the element top, so compute the
	   top offset from the font's actual CSS ascent/descent (--glyph-ascent/--glyph-descent,
	   detected from the font file) instead of hardcoding a line-height. */
	top: calc(
		1px *
			(
				var(--ascender) + var(--half-gap) - var(--units-per-em) / 2 -
				(var(--glyph-ascent, var(--ascender)) + var(--glyph-descent, var(--descender))) /
					2
			) *
			var(--scale)
	);
	left: 0;
	width: 100%;
}
.character-viewer__monitor__line {
	border-top: 1px solid currentcolor;
	justify-content: space-between;
	width: 100%;
	height: 0;
	font-size: 9px;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.4;
}
.character-viewer__monitor__line[data-name="baseline"] {
	top: calc(
		1px * (var(--ascender) + var(--half-gap)) * var(--scale) -
			0.5px
	);
	opacity: 0.8;
}
.character-viewer__monitor__line[data-name="ascender"] {
	top: calc(1px * var(--half-gap) * var(--scale));
}
.character-viewer__monitor__line[data-name="cap-height"] {
	top: calc(
		1px *
			(
				var(--ascender) + var(--half-gap) -
					var(--cap-height)
			) *
			var(--scale)
	);
}
.character-viewer__monitor__line[data-name="x-height"] {
	top: calc(
		1px *
			(var(--ascender) - var(--x-height) + var(--half-gap)) *
			var(--scale)
	);
}
.character-viewer__monitor__line[data-name="descender"] {
	top: calc(
		1px *
			(var(--ascender) - var(--descender) + var(--half-gap)) *
			var(--scale)
	);
}
.character-viewer__monitor__line__label {
	white-space: nowrap;
	opacity: 0.6;
	padding-right: 4px;
}
.character-viewer__monitor__line__value {
	white-space: nowrap;
	opacity: 0.6;
	padding-left: 4px;
}
.character-viewer__monitor__details {
	grid-column-gap: 20px;
	--checkbox-size: 20px;
	--checkbox-margin: 10px;
	grid-template-columns: max-content auto;
	line-height: 1.6;
	display: grid;
}
.character-viewer__monitor__details > span {
	white-space: nowrap;
	text-overflow: ellipsis;
	align-items: center;
	display: flex;
	overflow: hidden;
}
.character-viewer__monitor__details > span > label {
	align-items: center;
	display: flex;
}
@media screen and (max-width: 1000px) {
	.character-viewer__monitor__details {
		grid-template-columns: auto;
	}
	.character-viewer__monitor__details > :nth-child(2n) {
		margin-bottom: 16px;
	}
}
.character-viewer__monitor__details .select {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-bottom: 0;
}
.character-viewer__monitor__details .select__select {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
}
#cv-style-select {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}
.character-viewer__monitor__details .select__text {
	display: flex;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
}
.character-viewer__monitor__details .icon svg {
	width: 8px;
	height: 8px;
}
/* blocks */
.character-viewer__block {
	clear: both;
}
.character-viewer__block:not(:first-child) {
	padding-top: 20px;
}
.character-viewer__block__name {
	height: 30px;
	display: flex;
	align-items: center;
	font-size: 11px;
	opacity: 0.5;
}
.character-viewer__block__characters {
	margin-left: 1px;
	font-size: 30px;
}
.character-viewer__block__character-list > div {
	--size: 1;
	--item-size: calc(var(--size) / (var(--width) / 60) * 100%);
	--height: calc(var(--item-size) / var(--size));
	text-align: center;
	cursor: pointer;
	white-space: pre;
	width: var(--item-size);
	height: 0;
	padding-top: calc(var(--height) / 2);
	padding-bottom: calc(var(--height) / 2);
	float: left;
	z-index: 0;
	border: 1px solid currentcolor;
	justify-content: center;
	align-items: center;
	margin-bottom: -1px;
	margin-left: -1px;
	display: flex;
	position: relative;
	opacity: 0.3;
}
.character-viewer__block__character-list > div[data-size="2"] {
	--size: 2;
}
.character-viewer__block__character-list > div[data-size="3"] {
	--size: 3;
}
.character-viewer__block__character-list > div[data-size="4"] {
	--size: 4;
}
.character-viewer__block__character-list > div[data-size="5"] {
	--size: 5;
}
.character-viewer__block__character-list > div:hover,
.character-viewer__block__character-list > div[data-selected="true"] {
	z-index: 1;
	opacity: 1;
	background: #000;
	border-color: #000;
	color: #fff;
}

.character-viewer__block__character-list > div:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: -2px;
}

/* Type Tester toolbar & slider styles */
.type-tester {
	border-top: 1px solid #000;
	padding-top: 20px;
	padding-bottom: 0;
	margin-bottom: 0;
}
.type-tester__toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	font-family: var(--domi-font-body, var(--wp--preset--font-family--inter, Inter, sans-serif));
	font-size: 12px;
}
.type-tester__toolbar__tools {
	display: flex;
	align-items: center;
	gap: 20px;
}
.type-tester__slider {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 200px;
}
.type-tester__slider__track {
	flex: 1;
	height: 2px;
	background: #ccc;
	position: relative;
	cursor: pointer;
}
.type-tester__slider__handle {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #000;
	border: none;
	cursor: grab;
}
.type-tester__align {
	display: flex;
	gap: 2px;
}
.type-tester__align__btn {
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.4;
	padding: 4px;
}
.type-tester__align__btn[data-active="true"] {
	opacity: 1;
}
.type-tester__edit-all {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}