/* FontProof — base styles. Import once: `import "fontproof/styles.css"`.
   The control bar is the signature UI: a slim segmented strip that stays hidden
   until the tester is engaged (focus-within), then reveals controls under the
   sample. Titles difference-blend against the bar so they stay legible over the
   slider fills. Monochrome by default; `.fp--tdf` is a green-on-black preset.
   Values are hidden unless `showValues` is set. */

.fp {
	/* Theme tokens — black & white defaults */
	--fp-accent: #000;
	--fp-fg: #000;
	--fp-bg: #fff;
	--fp-bar-bg: #fff;
	--fp-bar-track: #e5e5e5;
	--fp-bar-fill: #000;
	--fp-bar-h: 26px;
	--fp-bar-radius: 6px;
	--fp-speed: 0.18s;

	display: flex;
	flex-direction: column;
	color: var(--fp-fg);
	background: var(--fp-bg);
}

.fp__stage {
	min-width: 0;
	overflow: hidden;
}

.fp__type {
	margin: 0;
	line-height: 1.1;
}

/* Editable sample text. Placeholder is CSS-only, so it is never stale content. */
.fp__text {
	outline: none;
	min-height: 1em;
}

.fp__text:empty::before {
	content: attr(data-placeholder);
	color: #9ca3af;
	pointer-events: none;
}

.fp__text:focus-visible {
	outline: 2px solid var(--fp-accent);
	outline-offset: 2px;
}

/* ---- The control bar ------------------------------------------------- */
/* Hidden until the tester is focused; reveals on :focus-within. */
.fp__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	background: var(--fp-bar-bg);
	border-radius: var(--fp-bar-radius);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transform: translateY(-4px);
	transition:
		max-height var(--fp-speed) ease,
		opacity var(--fp-speed) ease,
		transform var(--fp-speed) ease,
		margin-top var(--fp-speed) ease;
}

.fp:focus-within .fp__controls {
	/* Generous cap so a bar that wraps to several rows on narrow widths still
	   animates open without snapping at the end. */
	max-height: 50vh;
	margin-top: 0.5rem;
	opacity: 1;
	overflow: visible;
	pointer-events: auto;
	transform: none;
}

/* Equal-width segments, no dividers/borders. */
.fp__control {
	position: relative;
	flex: 1 1 0;
	min-width: 56px;
	height: var(--fp-bar-h);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

/* The title (+ optional value) overlaid on each control. It sits above the
   input (z-index) so the slider never hides it, ignores pointer events so the
   control underneath still works, and difference-blends so it stays legible
   over both the filled and unfilled parts of the track. */
.fp__caption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	padding: 0 6px;
	font: 600 10px/1 system-ui, sans-serif;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
	color: #fff;
	mix-blend-mode: difference;
}

/* Values are hidden by default; shown (inline, after the title) with showValues. */
.fp__value {
	display: none;
	text-transform: none;
}

.fp--show-values .fp__value {
	display: inline;
}

.fp--show-values .fp__value::before {
	content: ": ";
}

/* Sliders: the range input fills the segment; the filled portion of the track
   is painted from the --fp-fill variable the component sets per value. */
.fp__slider {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	cursor: ew-resize;
	z-index: 1;
}

.fp__slider::-webkit-slider-runnable-track {
	height: 100%;
	background: linear-gradient(
		to right,
		var(--fp-bar-fill) 0 var(--fp-fill, 0%),
		var(--fp-bar-track) var(--fp-fill, 0%)
	);
}

.fp__slider::-moz-range-track {
	height: 100%;
	background: linear-gradient(
		to right,
		var(--fp-bar-fill) 0 var(--fp-fill, 0%),
		var(--fp-bar-track) var(--fp-fill, 0%)
	);
}

.fp__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 2px;
	height: 100%;
	background: var(--fp-bar-fill);
	opacity: 0;
}

.fp__slider::-moz-range-thumb {
	width: 2px;
	height: 100%;
	border: 0;
	background: var(--fp-bar-fill);
	opacity: 0;
}

.fp__slider:focus-visible {
	outline: 2px solid var(--fp-accent);
	outline-offset: -2px;
}

/* Toggle buttons (italic / wrap / features). The title lives in the caption;
   pressed state is the filled background. */
.fp__toggle {
	appearance: none;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: background var(--fp-speed) ease;
}

.fp__toggle[aria-pressed="true"] {
	background: var(--fp-bar-fill);
}

.fp__toggle:focus-visible {
	outline: 2px solid var(--fp-accent);
	outline-offset: -2px;
}

/* Alignment select fills its segment; its own text is hidden (the caption shows
   the title/value), but it still opens the native option list. */
.fp__select {
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	color: transparent;
	cursor: pointer;
}

.fp__select:focus-visible {
	outline: 2px solid var(--fp-accent);
	outline-offset: -2px;
}

/* Features dropdown panel hangs below the bar. */
.fp__control--features {
	position: relative;
}

.fp__panel {
	position: absolute;
	z-index: 10;
	top: calc(100% + 2px);
	left: 0;
	min-width: 12rem;
	display: grid;
	gap: 0.25rem;
	max-height: 16rem;
	overflow: auto;
	padding: 0.5rem 0.75rem;
	color: var(--fp-fg);
	background: var(--fp-bg);
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	font: 500 13px/1.3 system-ui, sans-serif;
}

.fp__panel[hidden] {
	display: none;
}

.fp__feature {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.fp__feature input {
	accent-color: var(--fp-accent);
}

/* Visually hidden live region for announcements. */
.fp__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Faithful TDF preset: green on black --------------------------------
   Add `fp--tdf` to the host (or className="fp--tdf"). */
.fp--tdf {
	--fp-accent: #67f4b8;
	--fp-bg: #000;
	--fp-fg: #fff;
	--fp-bar-bg: #000;
	--fp-bar-track: #000;
	--fp-bar-fill: #67f4b8;
	--fp-bar-radius: 0;
}

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