:root {
	--font-mono: Consolas, Inconsolata, Monaco, monospace;
}
color-swatch input {
	padding: .15em .3em .1em;
	border: 1px solid hsl(220 10% 78%);
	border-radius: .25em;
	font-family: var(--font-mono);

	&:invalid {
		background-color: hsl(0 60% 95%);
		border-color: hsl(0 60% 80%);
	}
}

body {
	font: 100%/1.5 system-ui;
	max-width: 84em;
	margin: 1em auto;
	padding-inline: 1em;

	.gradient {
		height: 100px;
		display: flex;
		> div {
			flex: auto;
			background: var(--step-color);
		}
	}
	.color-inputs {
		display: flex;
		justify-content: space-between;
	}

	.oog .gradient {
		height: 15px;
	}

	.method .info {
		display: none;
	}
	.gradients:not(.flush) {
		.method .info {
			display: block;
		}
	}
  .gamut-legend {
    ul{
      list-style: none;
      display: flex;
      gap: 3em;
      padding: 0;
    }
    .color-block {
      height: 1em;
      width: 1em;
      display: inline-block;
      background-color: var(--step-color);
    }
  }
	.footer {
		margin-top: 2em;
		text-align: center;
	}
}
details.timing-info {
	margin-top: 2em;
	 > dl {
		display: flex;
	}
	.timing-result{
		padding: 1em;
		dd {
			margin: 0;
		}
	}
	.metric > div {
		display: flex;
		justify-content: space-between;
		gap: 1em;
	}
}

#algorithms{
	label{
		margin-inline-end: 1em;
	}
}