* {
	box-sizing: border-box;
}

html {
	background: var(--color-brand-canvas);
	font-family: var(--font-sans-serif);
	font-size: 14px;
	container-type: inline-size;
}

body {
	grid-auto-rows: min-content min-content min-content auto;
	min-height: 100vh;
}

.grid-layout-main {
	display: grid;
	container-type: inline-size;
	row-gap: var(--row-gap);
	grid-template-columns:
		[screen-start] var(--screen-padding)
		[totalbleed-start] 1fr [bleed-start] var(--bleed-outer-width)
		[main-column-start] var(--column-padding)
		[content-start left-half-start] var(--half-width)
		[left-half-end] var(--margin-between-halves) [right-half-start] var(--half-width)
		[content-end right-half-end] var(--column-padding)
		[main-column-end] var(--bleed-outer-width)
		[bleed-end] 1fr [totalbleed-end] var(--screen-padding)
		[screen-end];
	margin: 0;
	padding: 0;
	--total-available-space: 100cqw;
	--row-gap: 16px;
	--column-padding: 16px;
	--target-column-width: 800px;
	--screen-padding: 16px;
	--margin-between-halves: 8px;
	--total-horizontal-spacing: 2 * var(--screen-padding) - 2 * var(--column-padding) -
		var(--margin-between-halves);
	--half-width: min(
		calc((var(--total-available-space) - var(--total-horizontal-spacing)) / 2),
		calc(
			(
					var(--target-column-width) - var(--margin-between-halves) -
						var(--column-padding) * 2
				) /
				2
		)
	);
	--bleed-outer-width: min(
		150px,
		max(
			0px,
			calc(
				(
						var(--total-available-space) - var(--target-column-width) -
							var(--total-horizontal-spacing)
					) /
					2
			)
		)
	);
	background: var(--color-brand-text-bg);
	color: var(--color-brand-text-fg);

	@container (max-width: 800px) {
		--screen-padding: 8px;
	}

	@container (max-width: 600px) {
		--screen-padding: 0px;
	}

	@container (max-width: 400px) {
		--column-padding: 8px;
	}

	& > * {
		grid-column: content;
	}
}

.subgrid-layout {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: screen-start / screen-end;
	row-gap: var(--row-gap);

	& > * {
		grid-column: content;
	}
}

.delete-button {
	height: 1rem;
	line-height: 0;
	padding: 0.5rem;
}

.nav-logo {
	display: flex;
	align-items: center;
}

nav {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	ul {
		display: flex;
		gap: 8px;
		padding-left: 0;

		li {
			list-style: none;
		}
	}
}

body.jdd-editor {
	margin: 0 !important;
	padding: 0 !important;
}

a {
	color: var(--color-brand-link-fg);
}

.sealious-list__actions {
	display: flex;
	gap: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: pretty;
	text-wrap: balance;
}

h1 {
	font-size: 2em;

	@container (max-width: 450px) {
		font-size: 1.6em;
	}
}

h2 {
	font-size: 1.5em;

	@container (max-width: 450px) {
		font-size: 1.3em;
	}
}

h3 {
	font-size: 1.17em;

	@container (max-width: 450px) {
		font-size: 1.1em;
	}
}

h4 {
	font-size: 1.17em;

	@container (max-width: 450px) {
		font-size: 1.05em;
	}
}