/* page layout */

html,
body,
body-main {
	height: 100%;
	display: flex;
	flex-direction: column;
}
body-header,
body-main {
	width: 100%;
	max-width: var(--s-container);
}

/* storybook */
body-main {
	details {
		margin-bottom: var(--s);
		padding: var(--s);
		border: 1px dashed transparent;
		&[open] {
			border-color: var(--c-fg);
			summary {
				margin-bottom: var(--s);
				position: sticky;
				top: 0;
			}
		}
	}
	summary {
		padding: calc(var(--s) / 2);
		cursor: pointer;
		background-color: var(--c-sb);
	}
}