.job-edit {
	padding: var(--space-l-2xl) 0;

	& > .layout {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xl);
		align-items: start;

		& > form {
			flex: 2 1 26rem;
			display: flex;
			flex-direction: column;
			gap: var(--space-m);

			& > [role="alert"] {
				color: var(--color-color-3);
			}

			& > .reasoning {
				background: var(--color-neutral-9);
				padding: var(--space-xs) var(--space-s);
				border-radius: var(--border-radius);
				color: var(--color-neutral-3);
			}

			& > .hint {
				color: var(--color-neutral-5);
				font-size: var(--font-size--1);
			}

			.field {
				display: flex;
				flex-direction: column;
				gap: var(--space-2xs);
				width: 100%;

				& > input,
				& > textarea,
				& > select {
					width: 100%;
				}
			}

			& > .hol-wrapping-row {
				grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
			}

			& > .checks {
				& > label {
					display: flex;
					align-items: center;
					gap: var(--space-xs);
				}
			}

			& > .actions {
				display: flex;
				gap: var(--space-s);
				align-items: center;
			}
		}

		& > .status {
			flex: 1 1 16rem;
			display: flex;
			flex-direction: column;
			gap: var(--space-s);
			padding: var(--space-s);
			border: 1px solid var(--color-neutral-8);
			border-radius: var(--border-radius);

			& > p {
				color: var(--color-neutral-4);

				& > .badge {
					display: inline-block;
					background: var(--color-neutral-9);
					color: var(--color-neutral-2);
					padding: var(--space-3xs) var(--space-xs);
					border-radius: 1em;
					font-size: var(--font-size--1);

					&.blocked {
						background: var(--color-color-11);
						color: var(--color-color-3);
					}

					&.published {
						background: var(--color-color-8);
						color: var(--color-color-0);
					}
				}
			}

			& > .reason {
				background: var(--color-color-11);
				color: var(--color-color-3);
				padding: var(--space-xs) var(--space-s);
				border-radius: var(--border-radius);
			}
		}
	}
}