@charset "UTF-8";

/* TODO: tab focus */

:root {
	--atto-max-width-main: 50rem;
	--atto-padding-body: 1rem 0;
	--atto-padding-header: 0 0 1rem 0;
	--atto-padding-footer: 1rem 0 0 0;
	--atto-padding-left-list: 2rem;

	--atto-margin-group: 1rem 0;
	--atto-margin-hr: 0.5rem 0;
	--atto-margin-header: 0 auto;
	--atto-margin-h1: 2rem 0 0.5rem 0;
	--atto-margin-h2: 2rem 0 0.5rem 0;
	--atto-margin-h3: 2rem 0 0.5rem 0;
	--atto-margin-h4: 2rem 0 0.5rem 0;
	--atto-margin-h5: 2rem 0 0.5rem 0;
	--atto-margin-h6: 2rem 0 0.5rem 0;
	--atto-margin-p: 0 0;
	--atto-margin-pre: 0.5rem 0;
	--atto-margin-li: 0.5rem 0;

	--atto-line-height: 1.50rem;

	--atto-font-size-code: 1rem;
	--atto-line-height-code: 1.25rem;
	--atto-tab-size: 4;

	--atto-border-size-td: 1px;
	--atto-border-size-th: 3px;

	--atto-border-radius-input: 0.5rem;
	--atto-border-radius-code: 0.25rem;
	--atto-border-radius-codeblock: 0.5rem;

	--atto-transition-default: 0.2s ease-in-out;

	--atto-size-details-chevron: 1.5rem;

	--atto-color-accent--4: #3F2727;
	--atto-color-accent--3: #4C302F;
	--atto-color-accent--2: #88302B;
	--atto-color-accent--1: #CC443D;
	--atto-color-accent: #F0544C;
	--atto-color-accent-1: #F6645D;
	--atto-color-accent-2: #F7736D;
	--atto-color-accent-3: #EF9F9B;
	--atto-color-accent-4: #F7B3AF;
	--atto-color-bg--4: #000000;
	--atto-color-bg--3: #111111;
	--atto-color-bg--2: #222222;
	--atto-color-bg--1: #252525;
	--atto-color-bg: #333333;
	--atto-color-bg-1: #3a3a3a;
	--atto-color-bg-2: #444444;
	--atto-color-bg-3: #505050;
	--atto-color-bg-4: #555555;
	--atto-color-fg--4: #505050;
	--atto-color-fg--3: #555555;
	--atto-color-fg--2: #666666;
	--atto-color-fg--1: #808080;
	--atto-color-fg: #CACACA;
	--atto-color-fg-1: #DADADA;
	--atto-color-fg-2: #EEEEEE;
	--atto-color-fg-3: #FAFAFA;
	--atto-color-fg-4: #FFFFFF;

	--atto-color-mark-bg: var(--atto-color-accent--3);
	--atto-color-mark-fg: var(--atto-color-2);

	--atto-color-kbd-bg: var(--atto-color-fg-1);
	--atto-color-kbd-fg: var(--atto-color-bg-1);

	--atto-color-guide: #444444;

	--atto-color-ins--1: #3A8C622f;
	--atto-color-ins: #4FB783;

	--atto-color-del--1: #C13C402f;
	--atto-color-del: #C13C40;

	--atto-color-note--1: #4AD7EA0C;
	--atto-color-note: #4AD7EA;

	--atto-color-note-suggestion--1: #32D7320C;
	--atto-color-note-suggestion: #32D732;

	--atto-color-note-strong--1: #8C5FB90C;
	--atto-color-note-strong: #8C5FB9;

	--atto-color-alert--1: #E87B2E0c;
	--atto-color-alert: #E87B2E;

	--atto-color-alert-strong--1: #FF0A320C;
	--atto-color-alert-strong: #FF0A32;

	--atto-color-th: transparent;

	--atto-color-code-bg--1: #303030;
	--atto-color-code-bg: #404040;
	--atto-color-code-syntax-normal: #DADADA;
	--atto-color-code-syntax-comment: #666666;
	--atto-color-code-syntax-keyword: #CC7832;
	--atto-color-code-syntax-keyword-alt: #DB9B5A;
	--atto-color-code-syntax-meta: #BBB529;
	--atto-color-code-syntax-number: #6897BB;
	--atto-color-code-syntax-string: #6A8759;
	--atto-color-code-syntax-type: #FFC66D;

	--atto-glyph-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' viewBox='0 0 16 16' width='16'%3E%3Cpath d='M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z'%3E%3C/path%3E%3Cpath d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'%3E%3C/path%3E%3C/svg%3E");
	--atto-glyph-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	--atto-glyph-checkmark-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
	--atto-glyph-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234AD7EA' width='16' height='16' viewBox='0 0 16 16' %3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
	--atto-glyph-note-suggestion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2332D732' viewBox='0 0 16 16' width='16' height='16' %3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'%3E%3C/path%3E%3C/svg%3E");
	--atto-glyph-note-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238C5FB9' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E");
	--atto-glyph-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E87B2E' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E");
	--atto-glyph-alert-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF0A32' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
	--atto-glyph-search: url("data:image/svg+xml,%3Csvg fill='none' width='24px' height='24px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--atto-glyph-email: url("data:image/svg+xml,%3Csvg fill='none' width='24px' height='24px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM16 12V13.5C16 14.8807 17.1193 16 18.5 16V16C19.8807 16 21 14.8807 21 13.5V12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21H16' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--atto-glyph-password: url("data:image/svg+xml,%3Csvg fill='%23222222' width='24px' height='24px' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M39,18H35V13A11,11,0,0,0,24,2H22A11,11,0,0,0,11,13v5H7a2,2,0,0,0-2,2V44a2,2,0,0,0,2,2H39a2,2,0,0,0,2-2V20A2,2,0,0,0,39,18ZM15,13a7,7,0,0,1,7-7h2a7,7,0,0,1,7,7v5H15ZM14,35a3,3,0,1,1,3-3A2.9,2.9,0,0,1,14,35Zm9,0a3,3,0,1,1,3-3A2.9,2.9,0,0,1,23,35Zm9,0a3,3,0,1,1,3-3A2.9,2.9,0,0,1,32,35Z' /%3E%3C/svg%3E");
	--atto-glyph-telephone: url("data:image/svg+xml,%3Csvg fill='%23222222' width='24px' height='24px' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E");
	--atto-glyph-number: url("data:image/svg+xml,%3Csvg fill='%23222222' width='24px' height='24px' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 8.7461 37.7031 L 15.8945 37.7031 L 13.7617 48.2969 C 13.7148 48.5312 13.6914 48.8125 13.6914 49.0469 C 13.6914 50.1953 14.4883 50.8281 15.5898 50.8281 C 16.7148 50.8281 17.5351 50.2187 17.7695 49.0703 L 20.0664 37.7031 L 31.1524 37.7031 L 29.0195 48.2969 C 28.9492 48.5312 28.9258 48.8125 28.9258 49.0469 C 28.9258 50.1953 29.7227 50.8281 30.8476 50.8281 C 31.9727 50.8281 32.7929 50.2187 33.0273 49.0703 L 35.3008 37.7031 L 43.6680 37.7031 C 44.9570 37.7031 45.8476 36.7656 45.8476 35.5 C 45.8476 34.4687 45.1445 33.6250 44.0898 33.6250 L 36.1445 33.6250 L 38.6289 21.25 L 46.8320 21.25 C 48.1211 21.25 49.0117 20.3125 49.0117 19.0468 C 49.0117 18.0156 48.3086 17.1719 47.2539 17.1719 L 39.4492 17.1719 L 41.3711 7.7265 C 41.3945 7.5859 41.4414 7.2812 41.4414 6.9766 C 41.4414 5.8281 40.6211 5.1719 39.4961 5.1719 C 38.1836 5.1719 37.5976 5.8984 37.3633 7.0000 L 35.3008 17.1719 L 24.2148 17.1719 L 26.1367 7.7265 C 26.1602 7.5859 26.2070 7.2812 26.2070 6.9766 C 26.2070 5.8281 25.3633 5.1719 24.2617 5.1719 C 22.9258 5.1719 22.3164 5.8984 22.1055 7.0000 L 20.0429 17.1719 L 12.3555 17.1719 C 11.0664 17.1719 10.1758 18.1563 10.1758 19.4453 C 10.1758 20.5 10.8789 21.25 11.9336 21.25 L 19.2227 21.25 L 16.7383 33.6250 L 9.1680 33.6250 C 7.8789 33.6250 6.9883 34.6094 6.9883 35.8984 C 6.9883 36.9531 7.6914 37.7031 8.7461 37.7031 Z M 20.8867 33.6250 L 23.3945 21.25 L 34.4805 21.25 L 31.9727 33.6250 Z'/%3E%3C/svg%3E");
	--atto-glyph-url: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H9M15 17H17C19.7614 17 22 14.7614 22 12C22 9.23858 19.7614 7 17 7H15M7 12L17 12' stroke='%23222222' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--atto-glyph-chevron: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

}

@media only screen and (prefers-color-scheme: light) {
	:root {
		--atto-color-accent--4: #F7B3AF;
		--atto-color-accent--3: #EF9F9B;
		--atto-color-accent--2: #F27F79;
		--atto-color-accent--1: #F6645D;
		--atto-color-accent: #F0544C;
		--atto-color-accent-1: #C63129;
		--atto-color-accent-2: #88302B;
		--atto-color-accent-3: #4C302F;
		--atto-color-accent-4: #3F2727;
		--atto-color-bg--4: #BABABA;
		--atto-color-bg--3: #CACACA;
		--atto-color-bg--2: #DADADA;
		--atto-color-bg--1: #EAEAEA;
		--atto-color-bg: #f5f5f5;
		--atto-color-bg-1: #FAFAFA;
		--atto-color-bg-2: #fdfdfd;
		--atto-color-bg-3: #fefefe;
		--atto-color-bg-4: #ffffff;
		--atto-color-fg--4: #eeeeee;
		--atto-color-fg--3: #bbbbbb;
		--atto-color-fg--2: #999999;
		--atto-color-fg--1: #777777;
		--atto-color-fg: #444444;
		--atto-color-fg-1: #333333;
		--atto-color-fg-2: #222222;
		--atto-color-fg-3: #111111;
		--atto-color-fg-4: #000000;

		--atto-color-code-bg--1: #EEEEEE;
		--atto-color-code-bg: #DDDDDD;
		--atto-color-code-syntax-normal: #444444;
		--atto-color-code-syntax-comment: #999999;
		--atto-color-code-syntax-type: #F0AA66;


		--atto-color-ins: #105932;
		--atto-color-del: #9B1C20;

	}
}

@media screen and (width <=50rem) {

	:root {
		--atto-max-width-main: 90%;
	}

}

::selection {
	background-color: var(--atto-color-accent--3);
}

/******************************************************************************/
/*                                                                COMPOSITION */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: var(--atto-padding-body);
	background-color: var(--atto-color-bg--1);
	color: var(--atto-color-fg);
	font-family: sans-serif;
	font-size: 1rem;
	line-height: var(--atto-line-height);
	accent-color: var(--atto-color-accent);
}

header {
	max-width: var(--atto-max-width-main);
	margin: var(--atto-margin-header);
	padding: var(--atto-padding-header);
}

footer {
	max-width: var(--atto-max-width-main);
	margin-left: auto;
	margin-right: auto;
	padding: var(--atto-padding-footer);
}

footer nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: auto;
	gap: 0 1rem;
}

main {
	max-width: var(--atto-max-width-main);
	margin-left: auto;
	margin-right: auto;
}

nav {
	margin: 0;
	padding: 0;
}

section {
	margin: var(--atto-margin-group);
}

/* section:target, */
/* details:target { */
/* 	border: 5px solid #f0544c15; */
/* 	border-radius: 1rem; */
/* 	padding: 1rem; */
/* } */

fieldset {
	margin: var(--atto-margin-group);
	border: none;
}

/* fieldset[role="radiogroup"] input[type="radio"] { */
/* 	display: block; */
/* } */

figure {
	margin: 0;
	padding: 0;
	overflow: auto;
}

/******************************************************************************/
/*                                                                 TYPOGRAPHY */

hr {
	margin: var(--atto-margin-hr);
	color: var(--atto-color-guide);
	background-color: var(--atto-color-guide);
	border: 0;
	border-top: 1px solid var(--atto-color-guide);
}

a {
	color: var(--atto-color-accent-1);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* TODO: a[download] */

h1 {
	font-size: 2.0rem;
	line-height: 2.0rem;
	margin: var(--atto-margin-h1);
}

h2 {
	font-size: 1.75rem;
	line-height: 1.75rem;
	margin: var(--atto-margin-h2);
}

h3 {
	font-size: 1.5rem;
	line-height: 1.5rem;
	margin: var(--atto-margin-h3);
}

h4 {
	font-size: 1.25rem;
	line-height: 1.25rem;
	margin: var(--atto-margin-h4);
}

h5 {
	font-size: 1.125rem;
	line-height: 1.125rem;
	margin: var(--atto-margin-h5);
}

h6 {
	font-size: 1.075rem;
	line-height: 1.075rem;
	margin: var(--atto-margin-h6);
}

hgroup {
	margin: 2.0rem 0 1.0rem 0;
}

hgroup>* {
	margin-top: 0;
	margin-bottom: 0;
}

p {
	font-size: 1rem;
	margin: var(--atto-margin-p);
}

small {
	font-size: 0.75rem;
}

big {
	font-size: 1.25rem;
}

/*                                                           Other typography */

pre {
	margin: var(--atto-margin-pre);
	overflow-x: auto;
	display: block;
}

textarea,
pre,
code,
samp {
	font-family: monospace;
	font-size: var(--atto-font-size-code);
	line-height: var(--atto-line-height-code);
	tab-size: var(--atto-tab-size);
}

code {
	background-color: var(--atto-color-code-bg);
	color: var(--atto-color-code-fg);
	border-radius: var(--atto-border-radius-code);
	padding: 0 0.25rem;
}

samp {
	background-color: var(--atto-color-code-bg--1);
	color: var(--atto-color-code-fg);
	border-radius: var(--atto-border-radius-codeblock);
	padding: 0 0.25rem;
}

/* TODO: add line numbers */

pre>code,
pre>samp {
	display: block;
	/* border-radius: 0; */
	padding: 0.75rem;
	overflow: auto;
}

pre:has(>code+samp)>*:first-child {
	border-radius: var(--atto-border-radius-codeblock) var(--atto-border-radius-codeblock) 0 0;
}

pre:has(>code+samp)>* {
	border-radius: 0;
}

pre:has(>code+samp)>*:last-child {
	border-radius: 0 0 var(--atto-border-radius-codeblock) var(--atto-border-radius-codeblock);
}

/* TODO: show language used in ::before */
/* pre:has(>code)::before { */
/* 	display: block; */
/* 	content: "Language: " attr(class); */
/* } */

/* TODO: Copy to clipboard button */
/* pre>code::before { */
/* 	content: var(--atto-glyph-clipboard); */
/* 	position: sticky; */
/* 	top: 0; */
/* 	left: 100%; */
/* 	display: inline; */
/* } */

kbd {
	background-color: var(--atto-color-kbd-bg);
	color: var(--atto-color-kbd-fg);
	padding: 0 0.25rem;
	border-radius: 0.25rem;
}

mark {
	background-color: var(--atto-color-mark-bg);
	color: var(--atto-color-mark-fg);
	border-radius: 0.25rem;
}

/* TODO: add glyphs for time and abbr? */

time[datetime],
abbr[title],
[data-tooltip] {
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 0.1rem;
	cursor: help;
}

time {
	background-color: var(--atto-color-bg);
	border-radius: 0.25rem;
	padding: 0 0.25rem;
}

ins,
del {
	border-radius: 0.25rem;
	text-decoration: none;
}

ins {
	background-color: var(--atto-color-ins--1);
	color: var(--atto-color-ins);
}

del {
	background-color: var(--atto-color-del--1);
	color: var(--atto-color-del);
}

/*                                                                Composition */

ol,
ul {
	list-style-position: outside;
	margin: 0;
	padding: 0 0 0 1rem;
}

li {
	margin: var(--atto-margin-li);
}

ol ol,
ul ul {
	padding-left: var(--atto-padding-left-list);
}

ol {
	counter-reset: item;
}

ol>li::before {
	counter-increment: item;
	content: counters(item, ".") ". ";
}

ol>li {
	list-style: none;
}

blockquote {
	margin: 0.5rem 0;
	border-left: 0.25rem solid var(--atto-color-bg-2);
	background-color: var(--atto-color-bg);
	padding: 1rem;
}

/*                                                                     Tables */

table {
	width: 100%;
	border-collapse: collapse;
}

th {
	padding: 0.5rem 0;
	background-color: var(--atto-color-th);
}

th,
td {
	text-align: center;
}

td {
	padding: 0.25rem;
}

/* TODO: limit styling to table[role="table"]? */

thead {
	border-bottom: var(--atto-border-size-th) solid var(--atto-color-guide);
}

tfoot {
	border-top: var(--atto-border-size-th) solid var(--atto-color-guide);
}

/* TODO: allow scope variants */

/* Table with header or footer */
table:has(> :is(thead, tfoot))>tbody>tr {
	border-bottom: var(--atto-border-size-td) solid var(--atto-color-guide);
}

/* Table with row header */

table:has(>tbody>tr>th) :is(thead, tfoot) th:not(:last-child) {
	border-right: var(--atto-border-size-td) solid var(--atto-color-guide);
}

tbody>tr>th:not(:last-child) {
	border-right: var(--atto-border-size-th) solid var(--atto-color-guide);
}

tbody>tr>th:not(:first-child) {
	border-left: var(--atto-border-size-th) solid var(--atto-color-guide);
}

tbody:has(>tr>th) td:not(:first-child) {
	border-left: var(--atto-border-size-td) solid var(--atto-color-guide);
}

/* tbody tr:nth-child(even) td { */
/* 	background-color: var(--atto-color-table-row-even); */
/* } */
/**/
/* tbody tr:nth-child(odd) td { */
/* 	background-color: var(--atto-color-table-row-odd); */
/* } */

/*                                                                   Articles */

article {
	background-color: var(--atto-color-bg-1);
	padding: 1rem;
	margin: 1rem 0;
	border-radius: 1rem;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
}

article>header>* {
	margin-top: 0;
}

article>footer>* {
	margin-bottom: 0;
}

details summary {
	list-style-type: none;
	display: block;
	position: relative;
	padding-left: var(--atto-size-details-chevron);
	cursor: pointer;
}

details summary::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: var(--atto-size-details-chevron);
	width: var(--atto-size-details-chevron);
	background-image: var(--atto-glyph-chevron);
	background-size: var(--atto-size-details-chevron);
	background-repeat: no-repeat;
	transition: transform var(--atto-transition-default);
	position: absolute;
	left: 0;
	top: calc(50% - var(--atto-size-details-chevron) / 2);
}

details[open] summary::before {
	transform: rotate(90deg);
}

details[open] {
	margin-bottom: 1rem;
}

details::details-content {
	margin-left: var(--atto-size-details-chevron);
	/* TODO: too much? */
	/* margin-left: calc(var(--atto-size-details-chevron) / 2 - var(--atto-details-guide-width) / 2); */
	/* border-left: var(--atto-details-guide-width) solid var(--atto-color-guide); */
	/* padding-left: 1rem; */
}

/*                                                                     Images */

svg {
	vertical-align: middle;
}

svg:not([fill]) {
	fill: currentColor;
	/* TODO: colorize with filters */
}

/*                                                                     Dialog */
dialog {
	z-index: 900;
	border: 1px solid transparent;
	padding: 2rem;
	background-color: var(--atto-color-bg-3);
	color: var(--atto-color-fg-3);
	border-radius: 1rem;
	box-shadow: 0px 8px 24px 8px rgba(0, 0, 0, 0.50);
}

/******************************************************************************/
/*                                                                 COMPONENTS */

input,
progress,
meter {
	vertical-align: middle;
}

meter,
progress {
	appearance: none;
	height: 1.25rem;
	width: 10rem;
	margin: 0.5rem;
	border: 1px solid transparent;
	border-radius: var(--atto-border-radius-input);
	background-color: var(--atto-color-bg-2);
	color: var(--atto-color-fg-1);
	box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}

meter {
	background: var(--atto-color-bg-2);
	border-radius: 1.75rem;
}

meter::-moz-meter-bar {
	/* background: var(--atto-color-accent); */
	border-radius: inherit;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}

progress::-webkit-progress-bar {
	background-color: transparent;
}

progress::-webkit-progress-value {
	border-radius: inherit;
	background-color: var(--atto-color-accent);
}

progress::-moz-progress-bar {
	background-color: var(--atto-color-accent);
	border-radius: inherit;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}

progress:indeterminate::-moz-progress-bar {
	background-color: transparent;
}

progress:indeterminate {
	border-radius: 1.75rem;
	background: var(--atto-color-bg-2) linear-gradient(to right, var(--atto-color-accent) 30%, var(--atto-color-bg-2) 30%) top left/150% 150% no-repeat;
	animation: progress-indeterminate 3.14s linear infinite;
}

@keyframes progress-indeterminate {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

input,
textarea,
button,
select {
	border: 1px solid transparent;
	border-radius: var(--atto-border-radius-input);
	margin: 0.5rem;
	padding: 0.5rem;
	transition:
		background-color var(--atto-transition-default),
		border-color var(--atto-transition-default),
		color var(--atto-transition-default),
		box-shadow var(--atto-transition-default);
	background-color: var(--atto-color-bg-2);
	color: var(--atto-color-fg-1);
}

input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"] {
	background-image: var(--atto-glyph-input-type);
	background-size: 1rem;
	background-position: 0.5rem;
	background-repeat: no-repeat;
	padding-left: 2rem;
}

input[type="search"] {
	--atto-glyph-input-type: var(--atto-glyph-search);
	border-radius: 2rem;
}

input[type="email"] {
	--atto-glyph-input-type: var(--atto-glyph-email);
}

input[type="password"] {
	--atto-glyph-input-type: var(--atto-glyph-password);
}

input[type="number"] {
	--atto-glyph-input-type: var(--atto-glyph-number);
}

input[type="tel"] {
	--atto-glyph-input-type: var(--atto-glyph-telephone);
}

input[type="url"] {
	--atto-glyph-input-type: var(--atto-glyph-url);
}

button,
input[type="button"],
input[type="image"],
input[type="reset"],
input[type="submit"],
[role="button"] {
	background-color: var(--atto-color-accent--2);
	color: var(--atto-color-fg-1);
	border: 1px solid transparent;
	border-radius: var(--atto-border-radius-input);
	margin: 0.5rem;
	padding: 0.5rem;
	transition:
		background-color var(--atto-transition-default),
		border-color var(--atto-transition-default),
		color var(--atto-transition-default),
		box-shadow var(--atto-transition-default);
	display: inline-block;
	line-height: 1rem;
	font-size: 1rem;
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

select {
	font-size: 1rem;
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
	vertical-align: middle;
	cursor: pointer;
}

select[multiple] {
	vertical-align: top;
}

select option {
	border-radius: var(--atto-border-radius-input);
	margin: 0.25rem;
	color: inherit;
	cursor: pointer;
}

select option:checked {
	background-color: var(--atto-color-accent--3);
}


select optgroup:disabled,
select option:disabled {
	color: var(--atto-color-fg--1);
	cursor: not-allowed;
}


input[type="checkbox"] {
	appearance: none;
	width: 1.75rem;
	height: 1.75rem;
	box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

input[type="checkbox"]:checked {
	background-color: var(--atto-color-accent--2);
	background-image: var(--atto-glyph-checkmark);
	background-size: 75% auto;
	background-repeat: no-repeat;
	background-position: center;
}

input[type="checkbox"]:indeterminate {
	--atto-glyph-checkmark: var(--atto-glyph-checkmark-indeterminate);
}

input[type="checkbox"][role="switch"] {
	width: 3.25rem;
	border-radius: 1.25rem;
	padding: 0.25rem;
	background-image: none;
	background-color: var(--atto-color-bg--2);
}

input[type="checkbox"][role="switch"]:checked {
	background-color: var(--atto-color-accent--2);
}

input[type="checkbox"][role="switch"]::before {
	display: block;
	background-color: white;
	content: "";
	height: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	transition: margin .1s ease-in-out;
}

input[type="checkbox"][role="switch"]:checked::before {
	/* width/2 - padding/2 */
	margin-inline-start: calc(3.25rem / 2 - 0.25rem / 2);
}

input[type="checkbox"][role="switch"]:indeterminate {
	background-color: var(--atto-color-accent--3);
}

input[type="checkbox"][role="switch"]:indeterminate::before {
	/* (width/2 - padding/2) / 2 */
	margin-inline-start: calc((3.25rem / 2 - 0.25rem / 2) / 2);
}

input[type="radio"] {
	appearance: none;
	height: 1.75rem;
	width: 1.75rem;
	padding: 0.25rem;
	border-radius: 50%;
	cursor: pointer;
}

input[type="radio"]:checked::before {
	display: block;
	background-color: var(--atto-color-accent);
	content: "";
	height: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
}

input[type="color"] {
	padding: 0.25rem;
	cursor: pointer;
}

input[type="file"] {
	cursor: pointer;
}

input[type="range"] {
	appearance: none;
	background-color: transparent;
	cursor: pointer;
}

input[type="range"]::-moz-range-track {
	height: 0.5rem;
	background-color: var(--atto-color-accent--3);
	border-radius: var(--atto-border-radius-input);
}

input[type="range"]:hover::-moz-range-track {
	background-color: var(--atto-color-accent--2);
	cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
	width: 1.25rem;
	height: 1.25rem;
	border: 0.25rem solid var(--atto-color-bg--2);
	border-radius: 50%;
	background-color: var(--atto-color-accent--1);
	cursor: grab;
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-thumb:hover {
	background-color: var(--atto-color-accent);
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 0.5rem;
	background-color: var(--atto-color-accent--3);
	border-radius: var(--atto-border-radius-input);
}

input[type="range"]:hover::-webkit-slider-runnable-track {
	background-color: var(--atto-color-accent--2);
	cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
	border-radius: 50%;
	background-color: var(--atto-color-accent--1);
	cursor: grab;
	outline: 0.25rem solid var(--atto-color-bg--2);
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
	margin-top: -0.25rem;
}

input[type="range"]::-webkit-slider-thumb:hover {
	background-color: var(--atto-color-accent);
}

input[type="range"]:active {
	cursor: grabbing;
}

input[type="range"]:active::-moz-range-thumb {
	cursor: grabbing;
}

input[type="range"]:active::-webkit-slider-thumb {
	cursor: grabbing;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
button:focus,
button:focus-visible {
	outline: 1px;
	border: 1px solid var(--atto-color-accent);
}

button:hover,
input[type="button"]:hover,
input[type="image"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
[role="button"]:hover {
	background-color: var(--atto-color-accent--1);
}

input[type="checkbox"]:hover {
	background-color: var(--atto-color-accent--3);

}

input[type="checkbox"]:checked:hover {
	background-color: var(--atto-color-accent);
}

button:active,
input[type="button"]:active,
input[type="image"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
[role="button"]:active {
	transition: border-color 0s ease-in-out;
	background-color: var(--atto-color-accent--2);
}

button:disabled,
input:disabled {
	background-color: var(--atto-color-bg);
	cursor: not-allowed;
}

input:invalid {
	box-shadow: 0 0 8px 0 rgba(255, 0, 0, 0.2);
}

input:required {
	box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.2);
}

input:required:valid {
	box-shadow: 0 0 8px 0 rgba(0, 255, 0, 0.2);
}

/*                                                                      Forms */

form {
	margin: var(--atto-margin-group);
}

/******************************************************************************/
/*                                                                EMBEDDABLES */

/* TODO: ... */

img {
	max-width: 100%;
	height: auto;
}

/******************************************************************************/
/*                                                             EXTRA FEATURES */


/*                                                          Presentation form */
form[role="presentation"] {
	display: grid;
	width: fit-content;
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}

form[role="presentation"] label:has(> input:not([type="checkbox"]):not([type="radio"])) {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	text-align: right;
}

form[role="presentation"] label:has(> input:not([type="checkbox"]):not([type="radio"])+span) {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	text-align: left;
}

/*                                                              Table as grid */
table[role="grid"] {
	table-layout: fixed;
}

table[role="grid"] td {
	text-align: initial;
}

tr[role="separator"] {
	border-top: var(--atto-border-size-td) solid var(--atto-color-guide);
}

tr[role="separator strong"] {
	border-top: var(--atto-border-size-th) solid var(--atto-color-guide);
}

td[role="separator"] {
	border-left: var(--atto-border-size-td) solid var(--atto-color-guide);
}

td[role="separator strong"] {
	border-left: var(--atto-border-size-th) solid var(--atto-color-guide);
}

/*                                                           Blockquote kinds */

/* NOTE: roles are defined as they are because ARIA only uses the first role */

blockquote[role="note"]::before,
blockquote[role="note suggestion"]::before,
blockquote[role="note strong"]::before,
blockquote[role="alert"]::before,
blockquote[role="alert strong"]::before {
	--icon-size: 1.25rem;
	display: block;
	align-items: center;
	background-repeat: no-repeat;
	font-size: var(--icon-size);
	line-height: var(--icon-size);
	font-weight: bold;
	background-position: calc(var(--icon-size) * 0.5) center;
	background-size: var(--icon-size);
	padding-left: calc(2 * var(--icon-size));
	margin-bottom: 0.5rem;
}

blockquote[role="note"]::before {
	color: var(--atto-color-note);
	content: "Note";
	background-image: var(--atto-glyph-note);
}

blockquote[role="note"] {
	border-color: var(--atto-color-note);
	background-color: var(--atto-color-note--1);
}

blockquote[role="note suggestion"]::before {
	color: var(--atto-color-note-suggestion);
	content: "Tip";
	background-image: var(--atto-glyph-note-suggestion);
}

blockquote[role="note suggestion"] {
	border-color: var(--atto-color-note-suggestion);
	background-color: var(--atto-color-note-suggestion--1);
}

blockquote[role="note strong"]::before {
	color: var(--atto-color-note-strong);
	content: "Important";
	background-image: var(--atto-glyph-note-strong);
}

blockquote[role="note strong"] {
	border-color: var(--atto-color-note-strong);
	background-color: var(--atto-color-note-strong--1);
}

blockquote[role="alert"]::before {
	color: var(--atto-color-alert);
	content: "Warning";
	background-image: var(--atto-glyph-alert);
}

blockquote[role="alert"] {
	border-color: var(--atto-color-alert);
	background-color: var(--atto-color-alert--1);
}

blockquote[role="alert strong"]::before {
	color: var(--atto-color-alert-strong);
	content: "Caution";
	background-image: var(--atto-glyph-alert-strong);
}

blockquote[role="alert strong"] {
	border-color: var(--atto-color-alert-strong);
	background-color: var(--atto-color-alert-strong--1);
}

/*                                                                Breadcrumbs */

nav[aria-label="breadcrumb"] a::before {
	content: "/";
	margin: 0 16px;
	display: inline-block;
	text-decoration: none;
	color: var(--atto-color-fg);
}

nav[aria-label="breadcrumb"] a[aria-current="page"] {
	color: var(--atto-color-fg);
}

/*                                                                    Tooltip */

time[datetime],
abbr[title],
[data-tooltip] {
	position: relative;
}

time[datetime]:hover::before,
time[datetime]:focus::before,
abbr[title]:hover::before,
abbr[title]:focus::before,
[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
	display: block;
	position: absolute;
	bottom: 100%;
	left: 0;
	white-space: nowrap;
	background: var(--atto-color-bg-1);
	border-radius: 0.25rem;
	padding: 0.5rem;
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
	max-width: 80vw;
	overflow: auto;
}

time[datetime]:hover::before,
time[datetime]:focus::before {
	content: attr(datetime);
}

abbr[title]:hover::before,
abbr[title]:focus::before {
	content: attr(title);
}

[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
	content: attr(data-tooltip);
}

/*                                                                   Dropdown */

details[role="list"] {
	display: inline-block;
	position: relative;
	background-color: var(--atto-color-bg-1);
	border: 1px solid transparent;
	border-radius: var(--atto-border-radius-input);
	margin: 0.5rem;
}

details[role="list"]>summary {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: calc(0.5rem + var(--atto-size-details-chevron)/2);
}

details[role="list"]::details-content {
	margin-left: 0;
}

details[role="list"][open]>menu {
	list-style: none;
	z-index: 10;
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	margin: 0;
	padding: 0;
	min-width: 100%;
	width: max-content;
	border-radius: var(--atto-border-radius-input);
	background-color: var(--atto-color-bg-1);
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
}

details[role="list"][open]>menu>li {
	margin: 1rem 0.25rem;
}

/*                                                             Dialog (popup) */
dialog[role="banner"][open] {
	display: flex;
	z-index: 999;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	width: inherit;
	min-width: 100%;
	height: inherit;
	min-height: 100%;
	padding: 0;
	border: 0;
	color: var(--atto-color-fg);
	background-color: transparent;
	backdrop-filter: blur(0.5rem);
}

/* TODO: search popup dialog > form[role="search"] */

/*                                                                        ToC */

nav[role="tree"] ol li {
	padding-left: 0.5rem;
	border-left: 1px solid var(--atto-color-guide);
}

nav[role="tree"] li li li li li {
	font-size: 0.75rem;
}

nav[role="tree"] li li li li {
	font-size: 0.80rem;
}

nav[role="tree"] li li li li {
	font-size: 0.85rem;
}

nav[role="tree"] li li li {
	font-size: 0.90rem;
}

nav[role="tree"] li li {
	font-size: 0.95rem;
}

nav[role="tree"] li {
	font-size: 1.00rem;
	line-height: 1.50rem;
}

@media (min-width: 90rem) {
	main>aside:has(>nav[role="tree"]) {
		position: sticky;
		top: 0;
		height: 0;
	}

	main>aside>nav[role="tree"] {
		position: relative;
		--size: 20rem;
		width: var(--size);
		left: calc(var(--size) * -1);
		display: inline-block;
		margin-top: 2rem;
		height: calc(100vh - 2rem);
		overflow-y: auto;
	}

	main>aside>nav[role="tree"] li:has(a[aria-current="step"]) {
		border-color: var(--atto-color-accent-1);
	}

}

/*                                                            Section counter */

main[role="list"] {
	counter-reset: section_step2;
}

/* TODO: require nested sections for more specificity? */
/* TODO: only consider section[id] > h1 > a ???*/

main[role="list"] h2[role="listitem"]::before {
	counter-increment: section_step2;
	content: counter(section_step2) ". ";
}

main[role="list"] h2[role="listitem"] {
	counter-reset: section_step3;
}

main[role="list"] h3[role="listitem"]::before {
	counter-increment: section_step3;
	content: counter(section_step2) "." counter(section_step3) ". ";
}

main[role="list"] h3[role="listitem"] {
	counter-reset: section_step4;
}

main[role="list"] h4[role="listitem"]::before {
	counter-increment: section_step4;
	content: counter(section_step2) "." counter(section_step3) "." counter(section_step4) ". ";
}

main[role="list"] h4[role="listitem"] {
	counter-reset: section_step5;
}

main[role="list"] h5[role="listitem"]::before {
	counter-increment: section_step5;
	content: counter(section_step2) "." counter(section_step3) "." counter(section_step4) "." counter(section_step5) ". ";
}

main[role="list"] h5[role="listitem"] {
	counter-reset: section_step6;
}

main[role="list"] h6[role="listitem"]::before {
	counter-increment: section_step6;
	content: counter(section_step2) "." counter(section_step3) "." counter(section_step4) "." counter(section_step5) "." counter(section_step6) ". ";
}

main[role="list"] h2[role="listitem"]::before,
main[role="list"] h3[role="listitem"]::before,
main[role="list"] h4[role="listitem"]::before,
main[role="list"] h5[role="listitem"]::before,
main[role="list"] h6[role="listitem"]::before {
	font-size: 0.75rem;
}

/*                                                            Loading spinner */

/* TODO: ... */

/*                                                                 Code tabs  */

/* (for multiple languages) */
/* TODO: tab, tablist, tabpanel aria-controls */
/* menu[role="tablist"] {} */
/* Or maybe with accordions? details with name */

/*
section[role="tablist"] {
	position: relative;
	display: block;
	height: 10rem;
	overflow: auto;
}

section[role="tablist"] details[role="tab"] {
	display: inline-block;
	min-width: 5rem;
	border-radius: 0.5rem 0.5rem 0 0;
	border-bottom: 1px solid var(--atto-color-accent--3);
}

section[role="tablist"] details[role="tab"][open] {
	border-bottom: 1px solid var(--atto-color-accent);
}

section[role="tablist"] details[role="tab"]::before {
	display: none;
}

section[role="tablist"] details[role="tab"] summary {
	list-style: none;
	padding: 0.25rem;
}

section[role="tablist"] details[role="tab"][open] div[role="tabpanel"] {
	display: block;
	position: absolute;
	left: 0;
	top: 3rem;
	width: 100%;
	border-radius: 0 0.5rem 0.5rem 0.5rem;
}

/* css selector goes brrrr LMAOO */
/* section[role="tablist"]:not(:has(details[role="tab"][open]))>details[role="tab"]:first-of-type>div[role="tabpanel"] { */
/* 	display: block; */
/* } */

/*                                                   Header and Footer banner */

body:has(>header[role="banner"]) {
	padding-top: 0;
}

body:has(>footer[role="banner"]) {
	padding-bottom: 0;
}

header[role="banner"],
footer[role="banner"] {
	z-index: 100;
	position: sticky;
	display: block;
	max-width: 100%;
	padding: 1rem;
	background-color: var(--atto-color-bg-2);
}

header[role="banner"] {
	top: 0;
	margin: 0 0 2rem 0;
	box-shadow: 0px 20px 16px 0px rgba(0, 0, 0, 0.2);
}

footer[role="banner"] {
	bottom: 0;
	margin: 2rem 0 0 0;
	box-shadow: 0px -20px 16px 0px rgba(0, 0, 0, 0.2);
}


/*                                                             Vertical ruler */

/* span[role="separator"] { */
/* 	display: inline-block; */
/* 	width: 1rem; */
/* 	height: 1rem; */
/* 	border-left: 1px solid var(--atto-color-guide); */
/* 	margin-left: 0.5rem; */
/* 	vertical-align: middle; */
/* } */

/* span[role="separator strong"] { */
/* 	border-left-width: 3px; */
/* } */

/*                                                             Layout helpers */

/*
.flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1rem;
}

.hbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
	grid-gap: 1rem;
}

.vbox {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
}
*/

/* TODO: move out */
details[hidden]+hr {
	display: none;
}