html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

.visually-hidden:not(:focus):not(:active) {
	block-size: 1px;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

[hidden] {
	display: none !important;
}

body {
    /* Font family source: https://systemfontstack.com */
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    font-size: 1em;
    line-height: 1.6;
	margin: 0;
	padding: 0;
}

.page-outline {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto 1fr auto;
	min-block-size: 100svh;

	& > :is(header, nav, main, footer) {
		padding: 1.5em 2em;

		& > .content {
			margin: 0 auto;
			max-inline-size: 68rem;
		}
	}
}

header {
	background-color: #000;
	border-block-end: 0.0625rem solid #fff;
	color: #fff;

	& a {
		color: currentColor;
	}

	& .content {
		align-items: center;
		display: flex;
		justify-content: space-between;
	}
}

nav {
	& :is(ol, ul) {
		list-style-type: '';
		margin: 0;
		padding: 0;
	}

	& > ul {
		display: flex;
	}

	& :is(a, button) {
		background-color: var(--menu-item-bg-color, transparent);
		border: 0.0625rem solid var(--menu-item-border-color, transparent);
		color: var(--menu-item-text-color, currentColor);
		padding: 0.5rem;
	}

	button {
		font-size: inherit;
		line-height: inherit;
		text-align: start;
	}
}

header nav {
	& :is(a, button) {
		display: inline-block;
		inline-size: 100%;

		&:is(:hover, :active, :focus-visible) {
			--menu-item-bg-color: #fff;
			--menu-item-border-color: #ccc;
			--menu-item-text-color: #000;
		}
	}

	& .dropdown {
		position: relative;

		> button::after {
			block-size: 0.5em;
			border-block-end: 0.0625rem solid currentColor;
			border-inline-end: 0.0625rem solid currentColor;
			content: '';
			display: inline-block;
			inline-size: 0.5em;
			inset-block-start: -0.1875rem;
			margin-inline-start: 0.75em;
			position: relative;
			transform: rotate(45deg);
		}

		& ul {
			background-color: #000;
			border: 0.0625rem solid #fff;
			flex-direction: column;
			inline-size: max-content;
			inset-block-start: 100%;
			inset-inline-end: 0;
			position: absolute;
		}

		& form {
			padding: 0;
		}

		&:has(button[aria-expanded='true']) {
			& ul {
				display: flex;
			}
		}
	}
}

form, .fake-form {
	padding-block-end: 0.75rem;

	> div {
		padding: 0.75rem 0;
	}

	& label {
		display: block;
	}

	& textarea {
		inline-size: clamp(20ch, 80ch, 100%);
	}
}

fieldset {
	--whitespace: 1rem;

	display: flex;
	flex-direction: column;
	gap: var(--whitespace);
	padding: var(--whitespace);

	& > legend {
		font-weight: 700;

		& > :is(h2, h3) {
			font-size: 1em;
			margin: 0;
		}
	}

	& > div:not([hidden]) + div {
		border-block-start: 0.0625rem dotted #333;
		padding-block-start: var(--whitespace);
	}

	&.many-to-many {
		margin-block-start: var(--whitespace);

		& > .form__row {
			display: flex;
			gap: inherit;
		}
	}

	& p.note--no-choices {
		&:first-of-type {
			margin-block-start: 0;
		}

		&:last-of-type {
			margin-block-end: 0;
		}
	}
}

table {
	border-collapse: collapse;

	& tr {
		border-block-end: 0.0625rem dotted #333;
	}

	& th, td {
		padding: 0.25em 0.5em;
	}

	& th {
		text-align: start;
	}

	& ul.actions {
		column-gap: 0.25rem;
		display: flex;
		list-style-type: '';
		margin: 0;
		padding: 0;
	}
}

footer {
	background-color: #000;
	color: #fff;

	& .company-name {
		font-weight: 700;
	}
}

.breadcrumbs {
	background-color: #1a1a1a;
	color: #fff;

	& ol {
		display: flex;
		flex-wrap: wrap;
	}
}

.page-title {
	margin-block-start: 0;
}

body[data-model="reference"]:is(.page--testPlans-create, .page--testPlans-update) {
	form > div {
		&:nth-of-type(1) {
			padding-block-end: 0;
		}

		&:nth-of-type(2) {
			padding-block-end: 0;
			padding-block-start: 0;
		}

		& > div {
			padding: 0.75rem 0;
		}
	}

	fieldset {
		flex-direction: row;
		margin-block-end: 0.75rem;

		& > div {
			align-items: center;
			display: inline-flex;
			gap: 0.25rem;

			& input {
				margin-block-start: 0;
			}

			& + div {
				border-block-start: none;
				border-inline-start: 0.0625rem dotted #333;
				padding-block-start: 0;
				padding-inline-start: var(--whitespace);
			}
		}
	}
}

body.page--testPlans-preview {
	& main > .content {
		max-inline-size: 100%;
	}

	& .table-wrapper {
		overflow-x: auto;
	}
}