.em-controller-tester {
	--em-controller-positive: var(--em-tools-accent);
	--em-controller-warning: #f4bd50;
	--em-controller-range: color-mix(in srgb, var(--em-tools-text) 28%, transparent);
	max-width: 64rem;
	margin-inline: auto;
}

.em-controller-tester__trust {
	margin-bottom: .8rem;
}

.em-controller-tester__panel {
	overflow: hidden;
}

.em-controller-tester__topbar,
.em-controller-tester__section-heading,
.em-controller-tester__sample-heading,
.em-controller-stick__heading,
.em-controller-tester__control-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.em-controller-tester__device {
	display: flex;
	align-items: center;
	gap: .85rem;
	min-width: 0;
}

.em-controller-tester__device-icon,
.em-controller-tester__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--em-tools-accent);
}

.em-controller-tester__device-icon {
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--em-tools-border);
	border-radius: var(--em-tools-radius);
	background: color-mix(in srgb, var(--em-tools-bg) 58%, transparent);
	font-size: 1.25rem;
}

.em-controller-tester__eyebrow {
	margin: 0 0 .2rem;
	color: var(--em-tools-muted);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.em-controller-tester__device-name,
.em-controller-tester__empty-title,
.em-controller-tester__section h3,
.em-controller-tester__sample-results h3,
.em-controller-stick h3,
.em-controller-sample-card h4 {
	margin: 0;
}

.em-controller-tester__device-name {
	overflow: hidden;
	max-width: min(58vw, 48rem);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.em-controller-tester__selector {
	max-width: 34rem;
	margin-top: 1.25rem;
}

.em-controller-tester__selector .em-tool-select {
	width: 100%;
	padding: .55rem .75rem;
}

.em-controller-tester__empty {
	padding: clamp(2.5rem, 7vw, 5rem) 1rem;
	text-align: center;
}

.em-controller-tester__empty-icon {
	margin: 0 auto 1rem;
	font-size: 3rem;
}

.em-controller-tester__empty-title {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.em-controller-tester__empty .em-tool-help {
	max-width: 42rem;
	margin: .75rem auto 0;
}

.em-controller-tester__mapping-notice {
	margin-top: 1.25rem;
}

.em-controller-tester__controller-map {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--em-tools-border);
}

.em-controller-tester__controller-map > .em-tool-help {
	max-width: 48rem;
	margin: .5rem 0 .75rem;
}

.em-controller-map {
	display: block;
	width: min(100%, 38rem);
	height: auto;
	margin: .4rem auto 0;
}

.em-controller-map__body {
	fill: color-mix(in srgb, var(--em-tools-bg) 72%, transparent);
	stroke: var(--em-tools-border-strong);
	stroke-width: 2;
}

.em-controller-map__face,
.em-controller-map__stick,
.em-controller-map__home,
.em-controller-map__small,
.em-controller-map__shoulder,
.em-controller-map__trigger,
.em-controller-map__dpad rect {
	fill: color-mix(in srgb, var(--em-tools-text) 8%, var(--em-tools-bg));
	stroke: color-mix(in srgb, var(--em-tools-muted) 58%, transparent);
	stroke-width: 2;
	transition: fill 100ms ease, stroke 100ms ease;
}

.em-controller-map [data-map-button-index][data-pressed="true"] {
	fill: color-mix(in srgb, var(--em-tools-accent) 42%, var(--em-tools-bg));
	stroke: var(--em-tools-accent);
}

.em-controller-tester__controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: end;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--em-tools-border);
}

.em-controller-tester__deadzone-control {
	max-width: 36rem;
}

.em-controller-tester__control-heading output {
	color: var(--em-tools-accent);
	font-weight: 700;
}

.em-controller-tester .em-tool-range {
	width: 100%;
	accent-color: var(--em-tools-accent);
}

.em-controller-tester__sample-actions {
	justify-content: flex-end;
}

.em-controller-tester__sticks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.em-controller-stick {
	min-width: 0;
}

.em-controller-stick__heading {
	margin-bottom: .75rem;
}

.em-controller-stick__heading h3 {
	font-size: 1rem;
	font-weight: 600;
}

.em-controller-stick__plot {
	display: block;
	width: min(100%, 20rem);
	height: auto;
	margin: .25rem auto .9rem;
}

.em-controller-stick__range {
	fill: color-mix(in srgb, var(--em-tools-bg) 72%, transparent);
	stroke: var(--em-controller-range);
	stroke-width: 1.5;
}

.em-controller-stick__unit-circle {
	fill: none;
	stroke: color-mix(in srgb, var(--em-tools-muted) 40%, transparent);
	stroke-width: 1;
	stroke-dasharray: 4 5;
}

.em-controller-stick__axis {
	stroke: color-mix(in srgb, var(--em-tools-muted) 32%, transparent);
	stroke-width: 1;
}

.em-controller-stick__deadzone {
	fill: color-mix(in srgb, var(--em-tools-accent) 11%, transparent);
	stroke: color-mix(in srgb, var(--em-tools-accent) 60%, transparent);
	stroke-width: 1.5;
}

.em-controller-stick__point {
	fill: var(--em-tools-accent);
	stroke: var(--em-tools-bg);
	stroke-width: 3;
}

.em-controller-stick__values,
.em-controller-sample-card__metrics,
.em-controller-tester__facts {
	display: grid;
	gap: .5rem;
	margin: 0;
}

.em-controller-stick__values {
	grid-template-columns: repeat(3, 1fr);
}

.em-controller-stick__values > div,
.em-controller-sample-card__metrics > div,
.em-controller-tester__facts > div {
	min-width: 0;
}

.em-controller-stick__values dt,
.em-controller-sample-card__metrics dt,
.em-controller-tester__facts dt {
	color: var(--em-tools-muted);
	font-size: .78rem;
}

.em-controller-stick__values dd,
.em-controller-sample-card__metrics dd,
.em-controller-tester__facts dd {
	margin: .15rem 0 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.em-controller-tester__sample-results,
.em-controller-tester__section {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--em-tools-border);
}

.em-controller-tester__sample-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1rem 0;
}

.em-controller-sample-card {
	padding: 1rem;
	border: 1px solid var(--em-tools-border);
	border-radius: var(--em-tools-radius);
	background: color-mix(in srgb, var(--em-tools-bg) 56%, transparent);
}

.em-controller-sample-card > .em-tool-status-item {
	margin: .75rem 0;
}

.em-controller-sample-card .em-tool-status-item[data-state="warning"] {
	border-color: color-mix(in srgb, var(--em-controller-warning) 65%, transparent);
	color: var(--em-tools-text);
}

.em-controller-sample-card__metrics {
	grid-template-columns: repeat(3, 1fr);
}

.em-controller-tester__buttons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: .6rem;
	margin-top: 1rem;
}

.em-controller-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 44px;
	padding: .6rem .7rem;
	border: 1px solid var(--em-tools-border);
	border-radius: var(--em-tools-radius);
	background: color-mix(in srgb, var(--em-tools-bg) 62%, transparent);
	transition: border-color 100ms ease, background-color 100ms ease;
}

.em-controller-button[data-pressed="true"] {
	border-color: var(--em-tools-accent);
	background: color-mix(in srgb, var(--em-tools-accent) 16%, var(--em-tools-bg));
}

.em-controller-button__label {
	font-size: .88rem;
	font-weight: 600;
}

.em-controller-button__value {
	color: var(--em-tools-muted);
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

.em-controller-tester__haptics .em-tool-button {
	margin-top: .75rem;
}

.em-controller-tester__advanced {
	margin-top: 1.5rem;
}

.em-controller-tester__advanced-body {
	display: grid;
	gap: 1.25rem;
	padding: .25rem 0 1rem;
}

.em-controller-tester__facts {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.em-controller-tester__raw-axes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: .5rem;
}

.em-controller-axis {
	display: flex;
	justify-content: space-between;
	gap: .6rem;
	padding: .45rem .55rem;
	border: 1px solid var(--em-tools-border);
	border-radius: 6px;
	font-size: .85rem;
}

.em-controller-axis code {
	color: var(--em-tools-accent);
	font: inherit;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.em-controller-tester__raw-device-id {
	overflow-wrap: anywhere;
}

.em-controller-tester__privacy-note {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin-top: .75rem;
}

.em-controller-tester--compact .em-controller-tester__secondary,
.em-controller-tester--compact .em-controller-tester__selector {
	display: none;
}

.em-controller-tester--compact .em-controller-tester__panel {
	padding: 1rem;
}

@media (max-width: 760px) {
	.em-controller-tester__topbar,
	.em-controller-tester__sample-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.em-controller-tester__device-name {
		max-width: 75vw;
	}

	.em-controller-tester__controls,
	.em-controller-tester__sticks,
	.em-controller-tester__sample-grid {
		grid-template-columns: 1fr;
	}

	.em-controller-tester__sample-actions {
		justify-content: stretch;
	}

	.em-controller-sample-card__metrics {
		grid-template-columns: 1fr;
	}

	.em-controller-tester__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.em-controller-tester__device-name {
		max-width: 65vw;
	}

	.em-controller-stick__values,
	.em-controller-tester__facts {
		grid-template-columns: 1fr;
	}
}

/* v0.3 guided diagnostic additions */
.em-controller-tester__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .6rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.em-controller-tester__steps li {
	display: flex;
	align-items: center;
	gap: .65rem;
	min-width: 0;
	padding: .7rem .8rem;
	border: 1px solid var(--em-tools-border);
	border-radius: var(--em-tools-radius);
	background: color-mix(in srgb, var(--em-tools-bg) 62%, transparent);
	color: var(--em-tools-muted);
}

.em-controller-tester__steps li > span {
	display: inline-grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	flex: 0 0 1.7rem;
	border: 1px solid var(--em-tools-border-strong);
	border-radius: 50%;
	font-size: .78rem;
	font-weight: 700;
}

.em-controller-tester__steps li strong {
	font-size: .84rem;
	font-weight: 600;
}

.em-controller-tester__steps li[data-state="active"] {
	border-color: color-mix(in srgb, var(--em-tools-accent) 64%, var(--em-tools-border));
	color: var(--em-tools-text);
}

.em-controller-tester__steps li[data-state="active"] > span {
	border-color: var(--em-tools-accent);
	color: var(--em-tools-accent);
}

.em-controller-tester__steps li[data-state="complete"] {
	color: var(--em-tools-text);
}

.em-controller-tester__steps li[data-state="complete"] > span {
	border-color: var(--em-tools-accent);
	background: color-mix(in srgb, var(--em-tools-accent) 18%, transparent);
	color: var(--em-tools-accent);
}

.em-controller-tester__input-progress {
	display: flex;
	align-items: center;
	gap: .65rem;
	white-space: nowrap;
}

.em-tool-link-button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--em-tools-accent);
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .18em;
	cursor: pointer;
}

.em-tool-link-button:hover {
	color: var(--em-tools-secondary);
}

.em-tool-link-button:focus-visible {
	outline: 2px solid var(--em-tools-accent);
	outline-offset: 3px;
}

.em-controller-button[data-tested="true"] {
	border-color: color-mix(in srgb, var(--em-tools-accent) 45%, var(--em-tools-border));
}

.em-controller-button__values {
	display: grid;
	gap: .05rem;
	justify-items: end;
	white-space: nowrap;
}

.em-controller-button__peak {
	color: var(--em-tools-muted);
	font-size: .68rem;
	font-variant-numeric: tabular-nums;
}

.em-controller-map [data-map-button-index][data-tested="true"]:not([data-pressed="true"]) {
	stroke: color-mix(in srgb, var(--em-tools-accent) 62%, var(--em-tools-muted));
}

.em-controller-sample-card__note {
	margin: .85rem 0 0;
}

.em-controller-tester__sweep {
	margin-top: 1.5rem;
}

.em-controller-tester__sweep-body {
	display: grid;
	gap: 1rem;
	padding: .25rem 0 1rem;
}

.em-controller-tester__sweep-controls {
	display: grid;
	grid-template-columns: minmax(0, 16rem) 1fr;
	gap: 1rem;
	align-items: end;
}

.em-controller-tester__sweep-controls .em-tool-select {
	width: 100%;
	margin-top: .35rem;
	padding: .55rem .75rem;
}

.em-controller-tester__sweep-result {
	display: grid;
	grid-template-columns: minmax(13rem, 19rem) 1fr;
	gap: 1.25rem;
	align-items: center;
	padding: 1rem;
	border: 1px solid var(--em-tools-border);
	border-radius: var(--em-tools-radius);
	background: color-mix(in srgb, var(--em-tools-bg) 56%, transparent);
}

.em-controller-sweep-plot {
	display: block;
	width: min(100%, 19rem);
	height: auto;
	margin-inline: auto;
}

.em-controller-sweep-plot__outer,
.em-controller-sweep-plot__axis {
	fill: none;
	stroke: color-mix(in srgb, var(--em-tools-muted) 40%, transparent);
	stroke-width: 1;
}

.em-controller-sweep-plot__outer {
	stroke-dasharray: 4 5;
}

.em-controller-sweep-plot__shape {
	fill: color-mix(in srgb, var(--em-tools-accent) 12%, transparent);
	stroke: var(--em-tools-accent);
	stroke-width: 2;
	stroke-linejoin: round;
}

.em-controller-tester__sweep-metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
}

.em-controller-tester__sweep-metrics > div {
	padding: .65rem .7rem;
	border: 1px solid var(--em-tools-border);
	border-radius: 6px;
}

.em-controller-tester__sweep-metrics dt {
	color: var(--em-tools-muted);
	font-size: .76rem;
}

.em-controller-tester__sweep-metrics dd {
	margin: .15rem 0 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.em-controller-tester__vibration-actions {
	margin-top: .75rem;
	flex-wrap: wrap;
}

@media (max-width: 760px) {
	.em-controller-tester__steps,
	.em-controller-tester__sweep-controls,
	.em-controller-tester__sweep-result {
		grid-template-columns: 1fr;
	}

	.em-controller-tester__steps li {
		padding: .6rem .7rem;
	}

	.em-controller-tester__section-heading {
		align-items: flex-start;
	}

	.em-controller-tester__input-progress {
		align-self: flex-start;
	}
}

@media (max-width: 460px) {
	.em-controller-tester__sweep-metrics {
		grid-template-columns: 1fr;
	}
}

/* v0.4 device-aware layouts, persistent diagnostics and haptic reporting */
.em-controller-tester__map-heading {
	align-items: flex-end;
}

.em-controller-tester__layout-control {
	display: grid;
	grid-template-columns: auto minmax(11rem, 15rem);
	gap: .3rem .65rem;
	align-items: center;
}

.em-controller-tester__layout-control .em-tool-label {
	grid-column: 1 / -1;
}

.em-controller-tester__layout-control .em-tool-select {
	width: 100%;
	padding: .5rem .7rem;
}

.em-controller-tester__layout-control .em-tool-meta {
	white-space: nowrap;
}

.em-controller-map-stack {
	position: relative;
	min-height: 19rem;
}

.em-controller-map[hidden] {
	display: none;
}

.em-controller-map__touchpad {
	fill: color-mix(in srgb, var(--em-tools-text) 6%, var(--em-tools-bg));
	stroke: color-mix(in srgb, var(--em-tools-muted) 58%, transparent);
	stroke-width: 2;
	transition: fill 100ms ease, stroke 100ms ease;
}

.em-controller-map__face-label,
.em-controller-map__minor-label {
	fill: var(--em-tools-muted);
	font-family: inherit;
	font-weight: 700;
	pointer-events: none;
	text-anchor: middle;
}

.em-controller-map__face-label {
	font-size: 14px;
}

.em-controller-map__minor-label {
	font-size: 9px;
	letter-spacing: .04em;
}

.em-controller-map [data-map-stick] {
	transition: transform 55ms linear, fill 100ms ease, stroke 100ms ease;
}

.em-controller-tester__buttons {
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.em-controller-button__label {
	line-height: 1.2;
}

.em-controller-sweep-plot__reference {
	fill: none;
	stroke: color-mix(in srgb, var(--em-tools-muted) 48%, transparent);
	stroke-width: 1.2;
	stroke-dasharray: 4 5;
}

.em-controller-sweep-plot__label {
	fill: var(--em-tools-muted);
	font-family: inherit;
	font-size: 8px;
	font-weight: 600;
	text-anchor: end;
}

.em-controller-tester__haptic-facts,
.em-controller-tester__session-grid {
	display: grid;
	gap: .7rem;
	margin: 1rem 0;
}

.em-controller-tester__haptic-facts {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.em-controller-tester__session-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.em-controller-tester__haptic-facts > div,
.em-controller-tester__session-grid > div {
	min-width: 0;
	padding: .65rem .7rem;
	border: 1px solid var(--em-tools-border);
	border-radius: 6px;
	background: color-mix(in srgb, var(--em-tools-bg) 46%, transparent);
}

.em-controller-tester__haptic-facts dt,
.em-controller-tester__session-grid dt {
	color: var(--em-tools-muted);
	font-size: .76rem;
}

.em-controller-tester__haptic-facts dd,
.em-controller-tester__session-grid dd {
	margin: .18rem 0 0;
	font-size: .88rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.em-controller-tester__vibration-confirm {
	margin-top: 1rem;
	padding: .85rem;
	border: 1px solid var(--em-tools-border);
	border-radius: var(--em-tools-radius);
	background: color-mix(in srgb, var(--em-tools-accent) 7%, var(--em-tools-bg));
}

.em-controller-tester__vibration-confirm .em-tool-label {
	margin: 0 0 .65rem;
}

.em-controller-tester__session-actions {
	align-items: center;
	margin-top: .9rem;
}

.em-controller-tester__session-actions .em-tool-link-button {
	margin-left: .25rem;
}

@media (max-width: 760px) {
	.em-controller-tester__map-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.em-controller-tester__layout-control {
		width: 100%;
		grid-template-columns: 1fr;
	}

	.em-controller-tester__layout-control .em-tool-label {
		grid-column: auto;
	}

	.em-controller-map-stack {
		min-height: 0;
	}

	.em-controller-tester__haptic-facts,
	.em-controller-tester__session-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.em-controller-tester__haptic-facts,
	.em-controller-tester__session-grid {
		grid-template-columns: 1fr;
	}

	.em-controller-tester__buttons {
		grid-template-columns: 1fr;
	}
}

.em-controller-tester__vibration-actions[hidden],
.em-controller-tester__vibration-confirm[hidden] {
	display: none;
}