.design-audit-button-families,
.design-audit-button-families > div,
.design-audit-control-state {
	display: grid;
}

.design-audit-button-families {
	gap: 1.5rem;
}

.design-audit-button-families > div {
	gap: 0.75rem;
}

.design-audit-button-families h4 {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-secondary);
}

.design-audit-control-grid,
.design-audit-button-sizes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.75rem;
}

.design-audit-control-state {
	align-content: start;
	justify-items: start;
	gap: 0.5rem;
}

.design-audit-control-state > div {
	display: flex;
	min-height: 2.5rem;
	align-items: center;
}

.design-audit [data-audit-state="hover"].btn-primary {
	background: var(--color-brand-hover);
}

.design-audit [data-audit-state="active"].btn-primary {
	background: var(--color-brand-active);
}

.design-audit [data-audit-state="hover"].btn-secondary {
	background: var(--color-gray-300);
}

.design-audit [data-audit-state="active"].btn-secondary {
	background: var(--color-gray-400);
}

.design-audit [data-audit-state="hover"].btn-ghost {
	background: var(--color-gray-200);
}

.design-audit [data-audit-state="active"].btn-ghost {
	background: var(--color-gray-300);
}

.design-audit [data-audit-state="hover"].btn-destructive {
	background: var(--color-destructive-hover);
}

.design-audit [data-audit-state="active"].btn-destructive {
	background: var(--color-destructive-active);
}

.design-audit-danger-actions .design-audit-control-state > div {
	padding: 0.5rem;
	border-radius: var(--radius-md);
	background: var(--color-danger-surface);
}

.design-audit [data-audit-state="hover"].btn-outline-danger {
	background: var(--color-danger-surface-hover);
}

.design-audit [data-audit-state="active"].btn-outline-danger {
	background: var(--color-danger-surface-active);
}

.design-audit [data-audit-state="focus"] {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.design-audit-link {
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-brand-ink);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.design-audit-link:is([data-audit-state="focus"], :focus-visible) {
	margin-inline: -0.25rem;
	padding-inline: 0.25rem;
}

.design-audit-link[data-audit-state="hover"] {
	color: var(--color-brand-hover);
	text-decoration-color: currentColor;
}

.design-audit-link[data-audit-state="active"] {
	color: var(--color-brand-active);
}

.design-audit-link[aria-disabled="true"] {
	color: var(--color-text-quaternary);
	text-decoration: none;
}

.design-audit-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.design-audit-field-grid label,
.design-audit-field-control {
	display: grid;
	gap: 0.375rem;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-secondary);
}

.design-audit-field-control .cv-select-trigger {
	width: 100%;
}

.design-audit-field-grid :is(input, select, textarea) {
	width: 100%;
	min-width: 0;
	padding: 0.375rem 0.5rem;
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
}

.design-audit-field-wide {
	grid-column: 1 / -1;
}

.design-audit-choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin-block-end: 1rem;
}

.design-audit-choice-row label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.design-audit-choice-row input {
	width: 1rem;
	height: 1rem;
}

.design-audit-selection-list,
.design-audit-menu,
.design-audit-dropdown-list {
	width: min(100%, 18rem);
	padding: 0.25rem;
	border-radius: var(--radius-lg);
	background: var(--color-page);
	box-shadow: var(--shadow-overlay);
}

.design-audit-selection-list [role="option"],
.design-audit-dropdown-list [role="option"] {
	display: flex;
	min-height: 2rem;
	align-items: center;
	gap: 0.5rem;
	border-radius: var(--radius-md);
	padding-inline: 0.5rem;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.design-audit-selection-list [aria-selected="true"],
.design-audit-dropdown-list [aria-selected="true"] {
	background: var(--color-selected);
	color: var(--color-text-primary);
}

.design-audit-selection-list [aria-disabled="true"] {
	color: var(--color-text-quaternary);
}

.design-audit-tab-specimens,
.design-audit-menu-specimens {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem;
}

.design-audit-tab-specimens > div,
.design-audit-menu-specimens > div {
	display: grid;
	gap: 0.5rem;
}

.design-audit-menu button[data-audit-state="focus"] {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.design-audit-menu {
	display: grid;
}

.design-audit-menu button {
	min-height: 2rem;
	border-radius: var(--radius-md);
	padding-inline: 0.5rem;
	font-size: var(--text-sm);
	text-align: left;
	color: var(--color-text-secondary);
}

.design-audit-menu button:hover {
	background: var(--color-hover);
	color: var(--color-text-primary);
}

.design-audit-menu button:disabled {
	opacity: 0.4;
}

.design-audit-menu .design-audit-menu-destructive {
	margin-block-start: 0.25rem;
	border-block-start: var(--edge-width) solid var(--color-edge);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	color: var(--color-destructive-ink);
}

:where(.design-audit-menu-destructive) :is([data-nucleo-icon], [data-filled-icon]) {
	color: inherit;
}

.design-audit-dropdown-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2rem;
}

.design-audit-dropdown-trigger {
	display: inline-flex;
	min-height: 2rem;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-inline: 0.5rem;
	font-size: var(--text-sm);
}

.design-audit-dropdown-open {
	display: grid;
	gap: 0.25rem;
}

.design-audit-dropdown-error {
	font-size: var(--text-sm);
	color: var(--color-destructive-ink);
}

@media (max-width: 639px) {
	.design-audit-field-grid {
		grid-template-columns: 1fr;
	}

	.design-audit-field-wide {
		grid-column: auto;
	}
}