@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:where(.dark, .dark *));

:root {
	--scrollbar: oklch(0.8368 0.0034 264.53);

	--background: oklch(0.994 0 0);
	--background-warning: oklch(0.2485 0.0617 0);
	--background-translucent: oklch(99.405% 0.00011 271.152 / 0.93);
	--foreground: oklch(0.2221 0 0);
	--foreground-rgb: rgb(27, 27, 27);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.2221 0 0);
	--popover: oklch(0.994 0 0);
	--popover-foreground: oklch(0.2221 0 0);
	--primary: oklch(0.3589 0.0697 258.28);
	--primary-foreground: oklch(0.985 0 0);
	--link: var(--primary);
	--secondary: oklch(0.97 0 0);
	--secondary-foreground: oklch(0.265 0 0);
	--muted: oklch(0.97 0 0);
	--muted-50-real: oklch(0.9821 0 0); /* 50% opacity without the opacity */
	--muted-highlight: oklch(0.95 0 0);
	--muted-foreground: oklch(0.556 0 0);
	--muted-foreground-50: oklch(55.553% 0.00006 271.152 / 0.5);
	--muted-foreground-7: oklch(55.553% 0.00006 271.152 / 0.07);
	--accent: oklch(0.931 0 0);
	--accent-foreground: oklch(0.265 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--destructive-foreground: oklch(0.577 0.245 27.325);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);
	--radius: 0.35rem;

	--status-info: oklch(0.5309 0.1628 244.25);
	--status-success: oklch(0.6371 0.1749 146.7);
	--status-warning: oklch(0.7074 0.1455 95.22);
	--status-error: oklch(0.577 0.245 27.325);

	--drag-target: oklch(0.8985 0.0419 244.63);

	--hook-status-fresh: oklch(0.6 0.15 150);
	--hook-status-fresh-foreground: oklch(0.38 0.095 150);
	--hook-status-triggered: var(--primary);
	--hook-status-triggered-foreground: var(--primary);
	--hook-status-needs-attention: oklch(0.65 0.13 76);
	--hook-status-needs-attention-foreground: oklch(0.42 0.085 72);
	--comment-highlight: oklch(0.8633 0.1764 89.91);

	--http-method-get: oklch(0.5002 0.1962 259.56);
	--http-method-post: oklch(0.4784 0.1512 140.01);
	--http-method-put: oklch(0.7072 0.0511 71.93);
	--http-method-patch: oklch(0.6771 0.0299 136.93);
	--http-method-delete: oklch(0.5114 0.1672 38.04);
	--http-method-options: oklch(0.6228 0.0359 198.65);
	--http-method-head: oklch(0.597 0.0221 270.05);
	--http-method-connect: oklch(0.6151 0.0495 302.07);
	--http-method-trace: oklch(0.6456 0.028 94.88);
	--url-path-param: oklch(0.7183 0.063 144.88);

	--sidebar: oklch(0.9672 0 0);
	--sidebar-foreground: oklch(0.302 0.0036 286.18);
	--sidebar-primary: oklch(0.265 0 0);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.931 0 0);
	--sidebar-accent-foreground: oklch(0.265 0 0);
	--sidebar-border: oklch(0.922 0 0);
	--sidebar-ring: oklch(0.708 0 0);

	--diff-added: oklch(53.282% 0.16399 143.531 / 0.3);
	--diff-removed: oklch(57.909% 0.23191 28.689 / 0.3);
	--diff-added-foreground: oklch(42% 0.13 143.5);
	--diff-removed-foreground: oklch(45% 0.18 28.7);
	--diff-text-added: oklch(53.282% 0.16399 143.531 / 0.3);
	--diff-text-removed: oklch(57.909% 0.23191 28.689 / 0.3);
	--diff-field-added: oklch(53.282% 0.16399 143.531 / 0.2);
	--diff-field-removed: oklch(57.909% 0.23191 28.689 / 0.2);

	--selectable-color-1: theme(--color-red-600);
	--selectable-color-2: theme(--color-orange-600);
	--selectable-color-3: theme(--color-amber-600);
	--selectable-color-4: theme(--color-yellow-600);
	--selectable-color-5: theme(--color-lime-600);
	--selectable-color-6: theme(--color-green-600);
	--selectable-color-7: theme(--color-emerald-600);
	--selectable-color-8: theme(--color-teal-600);
	--selectable-color-9: theme(--color-cyan-600);
	--selectable-color-10: theme(--color-sky-600);
	--selectable-color-11: theme(--color-blue-600);
	--selectable-color-12: theme(--color-indigo-600);
	--selectable-color-13: theme(--color-violet-600);
	--selectable-color-14: theme(--color-purple-600);
	--selectable-color-15: theme(--color-fuchsia-600);
	--selectable-color-16: theme(--color-pink-600);

	--chart-data-1: theme(--color-amber-500);
	--chart-data-2: theme(--color-teal-500);
	--chart-data-3: theme(--color-indigo-500);
	--chart-data-4: theme(--color-fuchsia-500);
	--chart-data-5: theme(--color-emerald-500);
	--chart-data-6: theme(--color-cyan-500);
	--chart-data-7: theme(--color-sky-500);
	--chart-data-8: theme(--color-blue-500);
	--chart-data-9: theme(--color-violet-500);
	--chart-data-10: theme(--color-lime-500);
	--chart-data-11: theme(--color-yellow-500);
	--chart-data-12: theme(--color-purple-500);
	--chart-data-13: theme(--color-orange-500);
	--chart-data-14: theme(--color-pink-500);
	--chart-data-15: theme(--color-green-500);
	--chart-data-16: theme(--color-red-500);

	/* editor caret colors */
	--caret-red-500: theme(--color-red-500);
	--caret-red-600: theme(--color-red-600);
	--caret-red-700: theme(--color-red-700);
	--caret-red-800: theme(--color-red-800);
	--caret-orange-500: theme(--color-orange-500);
	--caret-orange-600: theme(--color-orange-600);
	--caret-orange-700: theme(--color-orange-700);
	--caret-orange-800: theme(--color-orange-800);
	--caret-amber-500: theme(--color-amber-500);
	--caret-amber-600: theme(--color-amber-600);
	--caret-amber-700: theme(--color-amber-700);
	--caret-amber-800: theme(--color-amber-800);
	--caret-yellow-500: theme(--color-yellow-500);
	--caret-yellow-600: theme(--color-yellow-600);
	--caret-yellow-700: theme(--color-yellow-700);
	--caret-yellow-800: theme(--color-yellow-800);
	--caret-lime-500: theme(--color-lime-500);
	--caret-lime-600: theme(--color-lime-600);
	--caret-lime-700: theme(--color-lime-700);
	--caret-lime-800: theme(--color-lime-800);
	--caret-green-500: theme(--color-green-500);
	--caret-green-600: theme(--color-green-600);
	--caret-green-700: theme(--color-green-700);
	--caret-green-800: theme(--color-green-800);
	--caret-emerald-500: theme(--color-emerald-500);
	--caret-emerald-600: theme(--color-emerald-600);
	--caret-emerald-700: theme(--color-emerald-700);
	--caret-emerald-800: theme(--color-emerald-800);
	--caret-teal-500: theme(--color-teal-500);
	--caret-teal-600: theme(--color-teal-600);
	--caret-teal-700: theme(--color-teal-700);
	--caret-teal-800: theme(--color-teal-800);
	--caret-cyan-500: theme(--color-cyan-500);
	--caret-cyan-600: theme(--color-cyan-600);
	--caret-cyan-700: theme(--color-cyan-700);
	--caret-cyan-800: theme(--color-cyan-800);
	--caret-sky-500: theme(--color-sky-500);
	--caret-sky-600: theme(--color-sky-600);
	--caret-sky-700: theme(--color-sky-700);
	--caret-sky-800: theme(--color-sky-800);
	--caret-blue-500: theme(--color-blue-500);
	--caret-blue-600: theme(--color-blue-600);
	--caret-blue-700: theme(--color-blue-700);
	--caret-blue-800: theme(--color-blue-800);
	--caret-indigo-500: theme(--color-indigo-500);
	--caret-indigo-600: theme(--color-indigo-600);
	--caret-indigo-700: theme(--color-indigo-700);
	--caret-indigo-800: theme(--color-indigo-800);
	--caret-violet-500: theme(--color-violet-500);
	--caret-violet-600: theme(--color-violet-600);
	--caret-violet-700: theme(--color-violet-700);
	--caret-violet-800: theme(--color-violet-800);
	--caret-purple-500: theme(--color-purple-500);
	--caret-purple-600: theme(--color-purple-600);
	--caret-purple-700: theme(--color-purple-700);
	--caret-purple-800: theme(--color-purple-800);
	--caret-fuchsia-500: theme(--color-fuchsia-500);
	--caret-fuchsia-600: theme(--color-fuchsia-600);
	--caret-fuchsia-700: theme(--color-fuchsia-700);
	--caret-fuchsia-800: theme(--color-fuchsia-800);
	--caret-pink-500: theme(--color-pink-500);
	--caret-pink-600: theme(--color-pink-600);
	--caret-pink-700: theme(--color-pink-700);
	--caret-pink-800: theme(--color-pink-800);
	--caret-rose-500: theme(--color-rose-500);
	--caret-rose-600: theme(--color-rose-600);
	--caret-rose-700: theme(--color-rose-700);
	--caret-rose-800: theme(--color-rose-800);

	@import "highlight.js/styles/github.css";
}

.dark {
	--scrollbar: oklch(0.471 0.0034 264.53);

	--background: oklch(0.1822 0 0);
	--background-translucent: oklch(18.22% 0.00002 271.152 / 0.93);
	--background-warning: oklch(0.5757 0.2009 11.12);
	--foreground: oklch(1 0 0); /* 985 */
	--foreground-rgb: rgb(250, 250, 250);
	--card: oklch(0.1286 0 0);
	--card-foreground: oklch(0.9 0 0);
	--popover: oklch(0.1822 0 0);
	--popover-foreground: oklch(1 0 0);
	--primary: oklch(0.3589 0.0697 258.28);
	--primary-foreground: oklch(0.985 0 0);
	--link: oklch(0.88 0.055 258.28);
	--secondary: oklch(0.1398 0 0);
	--secondary-foreground: oklch(1 0 0);
	--muted: oklch(0.1398 0 0);
	--muted-50-real: oklch(0.1591 0 0); /* 50% opacity without the opacity */
	--muted-highlight: oklch(0.1798 0 0);
	--muted-foreground: oklch(0.708 0 0);
	--muted-foreground-50: oklch(70.9% 0.00008 271.152 / 0.5);
	--muted-foreground-7: oklch(70.9% 0.00008 271.152 / 0.07);
	--accent: oklch(0.269 0 0);
	--accent-foreground: oklch(1 0 0);
	--destructive: oklch(0.396 0.141 25.723);
	--destructive-foreground: oklch(0.637 0.237 25.331);
	--border: oklch(0.269 0 0);
	--input: oklch(0.269 0 0);
	--ring: oklch(0.439 0 0);

	--drag-target: oklch(0.6603 0.1406 244.63 / 35.99%);

	--hook-status-fresh: oklch(0.78 0.14 150);
	--hook-status-fresh-foreground: oklch(0.89 0.09 150);
	--hook-status-triggered: oklch(0.75 0.1 258.28);
	--hook-status-triggered-foreground: oklch(0.88 0.055 258.28);
	--hook-status-needs-attention: oklch(0.83 0.13 82);
	--hook-status-needs-attention-foreground: oklch(0.91 0.08 85);

	--http-method-get: oklch(0.6773 0.1637 247.59);
	--http-method-post: oklch(0.6613 0.1999 140.25);
	--http-method-put: oklch(0.5693 0.0452 58.21);
	--http-method-patch: oklch(0.5631 0.0294 141.69);
	--http-method-delete: oklch(0.6958 0.1819 50.78);
	--http-method-options: oklch(0.5034 0.0317 199.04);
	--http-method-head: oklch(0.4744 0.0295 275.37);
	--http-method-connect: oklch(0.4606 0.0678 301.72);
	--http-method-trace: oklch(0.5077 0.0301 90.21);
	--url-path-param: oklch(0.6036 0.0526 144.89);

	--sidebar: oklch(0.1286 0 0);
	--sidebar-foreground: oklch(0.9 0 0);
	--sidebar-primary: oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground: oklch(0.9 0 0);
	--sidebar-accent: oklch(0.269 0 0);
	--sidebar-accent-foreground: oklch(0.9 0 0);
	--sidebar-border: oklch(0.269 0 0);
	--sidebar-ring: oklch(0.439 0 0);

	--diff-added: oklch(64.522% 0.20475 143.722 / 0.25);
	--diff-removed: oklch(49.991% 0.1933 29.256 / 0.25);
	--diff-added-foreground: oklch(82% 0.15 143.7);
	--diff-removed-foreground: oklch(80% 0.1 29.3);
	--diff-text-added: oklch(64.522% 0.20475 143.722 / 0.25);
	--diff-text-removed: oklch(49.991% 0.1933 29.256 / 0.25);
	--diff-field-added: oklch(64.522% 0.20475 143.722 / 0.2);
	--diff-field-removed: oklch(49.991% 0.1933 29.256 / 0.22);

	@import "highlight.js/styles/github-dark.css";
}

.pm-root-dropcursor {
	background: currentColor; /* inherits editor text color */
	opacity: 0.5;
}

/* defaults: https://tailwindcss.com/docs/theme#default-theme-variable-reference */
@theme {
	--font-inter: "Inter", "sans-serif";

	/* this might not be the best naming format, but I don't want to remap text-xs,
	text-sm, or text-base*/
	--text-2xs: 0.6875rem; /* 11px */
	--text-2xs--line-height: 0.8125rem; /* 13px */
	--text-2sm: 0.8125rem; /* 13px */
	--text-2sm--line-height: 0.9375rem; /* 15px */
	--text-2base: 0.9375rem; /* 15px */
	--text-2base--line-height: 1.1875rem; /* 17px */

	--shadow-fully-clear: 0rem 0.3125rem 1.25rem 0rem rgba(0, 0, 0, 0.15);

	/* note that we also use these values as theme(zIndex.modal) */
	--z-index-base: 0;
	--z-index-editor-overlay: 0; /* for things inside the editor but under content */
	--z-index-editor-diff-overlay: -1;
	--z-index-editor-content: 5;
	--z-index-editor-comment-indicators: 25; /* needs to be higher than navbar and drag handle */
	--z-index-navbar: 10;
	--z-index-sidebar: 20;
	--z-index-dropdown: 30;
	--z-index-modal: 50;
	--z-index-modal-overlay: 50;
	--z-index-sheet: 40;
	--z-index-sheet-overlay: 40;
	--z-index-popover: 30;
	--z-index-popover-dropdown: 30;
	--z-index-tooltip: 50;
	--z-index-toast: 500;
	--z-index-draggable: 500;
	--z-index-drag-handle: 20;
}

@theme inline {
	--color-background: var(--background);
	--color-background-translucent: var(--background-translucent);
	--color-background-warning: var(--background-warning);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-link: var(--link);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-50-real: var(--muted-50-real);
	--color-muted-highlight: var(--muted-highlight);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	--color-status-info: var(--status-info);
	--color-status-success: var(--status-success);
	--color-status-warning: var(--status-warning);
	--color-status-error: var(--status-error);

	--color-drag-target: var(--drag-target);
	--color-hook-status-fresh: var(--hook-status-fresh);
	--color-hook-status-fresh-foreground: var(--hook-status-fresh-foreground);
	--color-hook-status-triggered: var(--hook-status-triggered);
	--color-hook-status-triggered-foreground: var(
		--hook-status-triggered-foreground
	);
	--color-hook-status-needs-attention: var(--hook-status-needs-attention);
	--color-hook-status-needs-attention-foreground: var(
		--hook-status-needs-attention-foreground
	);
	--color-comment-highlight: var(--comment-highlight);

	--color-http-method-get: var(--http-method-get);
	--color-http-method-post: var(--http-method-post);
	--color-http-method-put: var(--http-method-put);
	--color-http-method-patch: var(--http-method-patch);
	--color-http-method-delete: var(--http-method-delete);
	--color-http-method-options: var(--http-method-options);
	--color-http-method-head: var(--http-method-head);
	--color-http-method-connect: var(--http-method-connect);
	--color-http-method-trace: var(--http-method-trace);
	--color-url-path-param: var(--url-path-param);

	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);

	--color-diff-added: var(--diff-added);
	--color-diff-removed: var(--diff-removed);
	--color-diff-added-foreground: var(--diff-added-foreground);
	--color-diff-removed-foreground: var(--diff-removed-foreground);
	--color-diff-text-added: var(--diff-text-added);
	--color-diff-text-removed: var(--diff-text-removed);
	--color-diff-field-added: var(--diff-field-added);
	--color-diff-field-removed: var(--diff-field-removed);

	--animate-accordion-down: accordion-down 0.2s ease-out;
	--animate-accordion-up: accordion-up 0.2s ease-out;

	@keyframes accordion-down {
		from {
			height: 0;
		}
		to {
			height: var(--reka-accordion-content-height);
		}
	}
	@keyframes accordion-up {
		from {
			height: var(--reka-accordion-content-height);
		}
		to {
			height: 0;
		}
	}
}

/*
	How to overwrite prose values: https://github.com/tailwindlabs/tailwindcss-typography/issues/372#issuecomment-2616848354
	Original theme: https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/styles.js#L1171
*/
@utility prose {
	--tw-prose-body: var(--foreground);
	--tw-prose-headings: var(--foreground);
	--tw-prose-lead: var(--foreground);
	--tw-prose-links: var(--foreground);
	--tw-prose-bold: var(--foreground);
	--tw-prose-counters: var(--foreground);
	--tw-prose-bullets: var(--foreground);
	--tw-prose-hr: var(--border);
	--tw-prose-quotes: var(--foreground);
	--tw-prose-quote-borders: var(--border);
	--tw-prose-captions: var(--muted-foreground);
	--tw-prose-kbd: var(--foreground);
	--tw-prose-kbd-shadows: var(--foreground-rgb);
	--tw-prose-code: var(--foreground);
	--tw-prose-pre-code: var(--foreground);
	--tw-prose-pre-bg: var(--muted);
	--tw-prose-th-borders: var(--border);
	--tw-prose-td-borders: var(--border);
}

@layer utilities {
	.link-primary {
		@apply cursor-pointer text-link underline underline-offset-2 hover:text-link/80;
	}

	.inline-code {
		@apply rounded-sm border border-border bg-muted px-[0.25em] py-[0.075em] font-normal;
	}

	.shadow-fully-clear {
		box-shadow: var(--shadow-fully-clear);
	}

	/* we need to style this here, globally, because tailwind cannot access
	these pseudoclasses or find code blocks without <pre> parents */
	.prose {
		code::before {
			/* remove backticks around inline code in prose */
			content: "";
		}

		code::after {
			/* remove backticks around inline code in prose */
			content: "";
		}

		p {
			@apply min-h-4;
		}

		h1 {
			@apply min-h-7;
		}

		code:not(pre code) {
			@apply rounded-sm border border-border bg-muted px-[0.25em] py-[0.075em] font-normal;
		}

		/* we need to enforce code block styles because for some reason
		prose doesn't handle dark themes well */
		pre {
			code {
				@apply font-mono text-foreground;

				* {
					@apply font-mono;
				}
			}
		}

		p:not(:last-child) {
			@apply mb-5;
		}

		> * {
			@apply my-5;
		}

		> :first-child {
			@apply mt-0;
		}

		/*
		 * Gap decoration wrappers use display:contents so they're invisible to layout,
		 * but they still break :first-child/:last-child selectors. These rules treat
		 * elements adjacent to gap wrappers at container boundaries as first/last children.
		 * Hook decoration widgets similarly break :first-child when placed outside nodes.
		 */
		> .pm-gap-wrapper:first-child + *,
		> [data-hook-decoration]:first-child + *,
		> .pm-gap-wrapper:first-child + [data-hook-decoration] + *,
		> [data-hook-decoration]:first-child + .pm-gap-wrapper + * {
			@apply mt-0;
		}

		/* Remove top margin from first p of first blockquote */
		> blockquote:first-child > p:first-child,
		> .pm-gap-wrapper:first-child + blockquote > p:first-child,
		> [data-hook-decoration]:first-child + blockquote > p:first-child,
		> .pm-gap-wrapper:first-child
			+ [data-hook-decoration]
			+ blockquote
			> p:first-child,
		> [data-hook-decoration]:first-child
			+ .pm-gap-wrapper
			+ blockquote
			> p:first-child {
			@apply mt-0;
		}

		/* Remove top margin from first li of first list */
		> ul:first-child > li:first-child,
		> ol:first-child > li:first-child,
		> ul:first-child > .pm-gap-wrapper:first-child + li,
		> ol:first-child > .pm-gap-wrapper:first-child + li,
		> .pm-gap-wrapper:first-child + ul > li:first-child,
		> .pm-gap-wrapper:first-child + ol > li:first-child,
		> .pm-gap-wrapper:first-child + ul > .pm-gap-wrapper:first-child + li,
		> .pm-gap-wrapper:first-child + ol > .pm-gap-wrapper:first-child + li,
		> [data-hook-decoration]:first-child + ul > li:first-child,
		> [data-hook-decoration]:first-child + ol > li:first-child,
		> [data-hook-decoration]:first-child
			+ ul
			> .pm-gap-wrapper:first-child
			+ li,
		> [data-hook-decoration]:first-child
			+ ol
			> .pm-gap-wrapper:first-child
			+ li,
		> .pm-gap-wrapper:first-child
			+ [data-hook-decoration]
			+ ul
			> li:first-child,
		> .pm-gap-wrapper:first-child
			+ [data-hook-decoration]
			+ ol
			> li:first-child,
		> [data-hook-decoration]:first-child
			+ .pm-gap-wrapper
			+ ul
			> li:first-child,
		> [data-hook-decoration]:first-child
			+ .pm-gap-wrapper
			+ ol
			> li:first-child {
			@apply mt-0;
		}

		> :last-child {
			@apply mb-0;
		}

		> *:has(+ .pm-gap-wrapper:last-child) {
			@apply mb-0;
		}

		/* Remove bottom margin from last li of last list (including deeply nested) */
		> ul:has(+ .pm-gap-wrapper:last-child) li:last-child,
		> ol:has(+ .pm-gap-wrapper:last-child) li:last-child {
			@apply mb-0;
		}

		ul,
		ol {
			li {
				> div {
					@apply w-full;
				}

				p,
				p:not(:last-child) {
					@apply my-0;
				}
			}
		}

		/* nested lists */
		ul ul,
		ul ol,
		ol ul,
		ol ol {
			@apply my-0;
		}

		ul ul > li:last-of-type {
			/* checklists need this to avoid extra margin at the bottom of the
			last nested item */
			@apply mb-0;
		}

		ul[data-type="taskList"] {
			@apply list-none p-0;

			li {
				@apply flex items-start;

				input {
					@apply mt-[0.125em];
				}

				/* the strike is always drawn and only its colour fades in:
				text-decoration-line is discrete and cannot animate. */
				p {
					@apply pl-[0.675em] line-through decoration-transparent transition duration-150;
				}

				&[data-checked="true"] > div > p {
					@apply decoration-current opacity-50;
				}

				/*
					Compensate for margin collapse loss when task items are nested.
					When siblings, their margins collapse. When nested, they don't.
					This negative margin restores the collapsed appearance.
					Without this, when changing a task item's indent level, the
					margin jump is jarring (the items below jump up).
				 */
				> div > ul[data-type="taskList"]:last-child {
					/* I have no idea why only this value works. Hopefully,
					future generations will provide a better solution. */
					@apply mt-[0.69em];
				}
			}
		}

		:where(h2, h3) {
			margin-top: 0 !important;
		}
	}
}

@layer base {
	* {
		@apply border-border outline-ring/50;
		font-family: var(--font-inter);
	}

	body {
		@apply max-w-screen overflow-x-hidden bg-background text-foreground;
	}

	/* a ::-webkit-scrollbar rule carrying a width switches macOS off its
	   floating overlay scrollbars, and the page then widens by the
	   scrollbar's width every time a dialog locks the body's scrolling. */
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar) transparent;
	}

	input[type="checkbox"] {
		@apply relative h-4 w-4 cursor-pointer appearance-none rounded-md border transition-colors duration-150;
	}

	input[type="checkbox"]:checked {
		@apply border-primary bg-primary;
	}

	input[type="checkbox"]::after {
		content: "";
		@apply absolute inset-0 bg-primary-foreground opacity-0 transition-opacity duration-150;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3.75 8.25 6.5 11 12.25 5.25'/%3E%3C/svg%3E")
			center / 100% no-repeat;
	}

	input[type="checkbox"]:checked::after {
		@apply opacity-100;
	}
}

/* disable task list checkboxes when the editor is not editable */
.editor-not-editable li[data-checked] > label {
	@apply pointer-events-none;
}

/* the hook bar decoration and the hook icon of a block that has a triggered
   hook and one that needs attention. They are striped in both status
   colours. */
@utility bg-hook-status-mixed {
	background-image: repeating-linear-gradient(
		-45deg,
		var(--hook-status-triggered) 0 0.25rem,
		var(--hook-status-needs-attention) 0.25rem 0.5rem
	);
}

.diff-added {
	@apply bg-diff-added;
}

.diff-removed {
	@apply bg-diff-removed;
}

.diff-overlay-anchor {
	@apply relative;
}

.diff-overlay {
	@apply pointer-events-none absolute z-editor-diff-overlay;
}

.diff-overlay.diff-added {
	@apply rounded-md bg-diff-added;
}

.diff-overlay.diff-removed {
	@apply rounded-md bg-diff-removed;
}

li.diff-checkbox-changed > label {
	@apply rounded-sm bg-diff-added outline-[0.15em] outline-diff-added;
}

.diff-text-added {
	@apply bg-diff-text-added;
}

.diff-text-removed {
	@apply bg-diff-text-removed;
}

/* horizontal rules: pseudo-element overlay around the thin line */
hr.diff-added,
hr.diff-removed {
	@apply relative overflow-visible;
	background: none;
}

hr.diff-added::before,
hr.diff-removed::before {
	@apply pointer-events-none absolute rounded-md;
	content: "";
	inset: -0.5em -0.2em -0.4em -0.2em;
}

hr.diff-added::before {
	@apply bg-diff-added;
}

hr.diff-removed::before {
	@apply bg-diff-removed;
}