:root[joblist-layout] {
	:is(body) {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		margin: 0;
	}
	height: 100%;
	display: flex;
}

joblist-layout {
	line-height: var(--line-height);
	:is(input, textarea, select) {
		color: var(--c-fg);
		padding: calc(var(--s) / 3);
		border: 1px solid var(--c-border);
	}
}

joblist-layout {
	:is(joblist-search) {
		width: 100%;
		align-self: center;
		position: sticky;
		top: 0;
	}
	:is(joblist-page, joblist-map-list) {
		flex-grow: 1;
	}
	:is(joblist-page) {
		display: flex;
		flex-direction: column;
		&:is([full]) {
			display: flex;
			flex-direction: column;
		}
		:is(a) {
			color: var(--c-link);
		}
		:is(a:visited) {
			color: var(--c-link--visited);
		}
		&:is(:not([full])) {
			padding: calc(var(--s) / 2);
		}
		:is(h1:first-of-type) {
			margin-top: 0;
		}
		:is(dl, pre) {
			padding: calc(var(--s) / 2);
			border: 1px solid var(--c-hr);
		}
		:is(dt) {
			font-weight: bold;
		}
		:is(dd) {
			margin-left: var(--s);
		}
		:is(pre) {
			white-space: pre-wrap;
		}
	}
	:is(joblist-menu) {
		position: sticky;
		bottom: 0;
		top: 0;
		max-height: 100vh;
		background-color: var(--c-bg-alt);
		outline: var(--c-hr) solid 1px;
		display: flex;
		flex-direction: column;
	}
	:is(joblist-menu) {
		:is(label[for="joblist-menu"]) {
			padding: calc(var(--s) / 3);
			position: sticky;
			bottom: 0;
		}
		:is(joblist-favicon) {
			position: sticky;
		}
		:is(button) {
			background-color: var(--c-bg-alt);
			padding: 0;
		}
		:is(li) {
			:is(a) {
				word-break: break-all;
				min-width: 10rem;
				display: flex;
				align-items: center;
				color: var(--c-fg);
			}
		}
		&:has(input[type="checkbox"][id="joblist-menu"]:checked) {
			overflow-y: scroll;
			scrollbar-width: none;
			-ms-overflow-style: none;
		}
		z-index: 2;
		flex-direction: column;
	}
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	@media (max-width: 40rem) {
		flex-direction: column;
	}
}

/* layouting with div and their attributes */
joblist-layout {
	:is(div) {
		&:is([row]) {
			&:is([padding]) {
				& > :is(*) {
					padding: calc(var(--s) / 1);
					flex-grow: 1;
					flex-shrink: 0;
				}
			}
			display: flex;
			flex-wrap: wrap;
		}
		&:is([grid]) {
			display: grid;
			gap: var(--s);
			@media (min-width: 50rem) {
				grid-auto-flow: column;
				grid-auto-columns: 1fr;
			}
		}
	}
}

joblist-page {
	z-index: 1;
}