/* VARS */
:root {
	--base-fg:							hsl(0 0 10);
	--base-bg:							hsl(0 0 100);
	--page-bg:							hsl(from var(--base-bg) h s 92.5);
	--medium-font-size:					.95em;
	--small-font-size:					.9em;
	--smaller-font-size:				.825em;
	--mainnav-color:					var(--base-fg);
	--toast-fg:							hsl(0 100 40);
	--toast-bg:							hsla(0 100 50 / .125);
	
	--sheet-shadow:						0.5px 5px 15px hsla(0 0 0 / 0.075);
	--sheet-scrollbar-color:			hsla(from var(--sheet-content-fg) h s l / 0.2);

	--sheet-content-line-height:		1.333;

	--sheet-content-faint-fg:			hsl(from var(--base-fg) h s 50);
	--sheet-content-code-bg:			hsla(0 0 0 / .05);
	--sheet-content-highlight-bg:		rgba(255 208 0 / 0.4);
	--sheet-content-callout-shadow:		0.5px 2px 5px hsla(0 0 0 / 0.075);
}


/* RESET */
* {
	font-weight: normal;
	box-sizing: border-box;
	font-family: inherit;
	color: inherit;
	-webkit-user-select: inherit; /* Safari */
	-ms-user-select: inherit; /* IE 10 and IE 11 */
	user-select: inherit; /* Standard syntax */
	/* background-color: rgba(255 0 0 / 0.05); */
}
:not(ul, ol, li) {
	padding: 0;
	margin: 0;
}


/* GENERAL */
body {
	font-family: "Authentic Sans 90", Arial, Helvetica, sans-serif;
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: stretch;
	min-height: 100vh;
	padding: 5vmin;
	color: var(--base-fg);
	background-color: var(--page-bg);
	overflow: hidden;
}
a {
	text-decoration: none;
	cursor: pointer;
	color: var(--sheet-content-link-fg);
}
body,
#Header,
#Footer {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}


/* HEADER, FOOTER */

/* Common */
:is(#Header, #Footer) a {
	color: var(--mainnav-color);
}

/* Header */
#Header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 2vmin;
	position: fixed;
	font-size: 1.45em;
	color: var(--mainnav-color);
	top: 5vmin;
	right: 5vmin;
	width: 100%;
	max-width: calc(100% - 10vmin - 120px);
	pointer-events: none;
}
#Header #Logo {
	position: fixed;
	left: 5vmin;
	top: 5vmin;
	width: 95px;
	height: auto;
}
#Header #Logo > svg {
	fill: var(--base-fg);
}
#Header #MainNav {
	display: flex;
	flex-flow: row wrap;
	margin: 0;
	padding: 0;
	gap: 2vmin;
	list-style-type: none;
	justify-content: flex-end;
	max-width: calc(100% - 120px);
}
#Header #MainNav a {
	pointer-events: all;
}
#Header #MainNav a:hover {
	text-decoration: underline;
}

/* Footer */
#Footer {
	position: fixed;
	bottom: 5vmin;
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	align-items: center;
}
@media screen and (orientation: portrait) {
	#Footer {
		font-size: 3.25vmin;
	}
}
#Footer #FooterLinks {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	align-items: center;
	gap: 2vmin;
}


/* BACKGROUND CANVAS */
#Background {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: url('https://raw.githubusercontent.com/m-born/eml-data/main/ui/bg.png'); */
	background-position: center center;
	/* background-size: cover; */
	mix-blend-mode: darken;
}


/* SHEETS: BASICS */

/* Sheets wrapper */
#SheetsWrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 100;
	pointer-events: all;
}

/* Sheets */
.sheet {
	position: absolute;
	width: 30ch;
	height: 25ch;
	min-width: 20ch;
	min-height: 10ch;
	display: flex;
	flex-flow: column nowrap;
	justify-content: stretch;
	align-items: stretch;
	color: var(--sheet-content-fg);
	background-color: var(--base-bg);
	border-radius: 1px;
	box-shadow: var(--sheet-shadow);
	pointer-events: all;
	-webkit-user-select: 	text; /* Safari */
	-ms-user-select: 		text; /* IE 10 and IE 11 */
	user-select: 			text; /* Standard syntax */
	display: none;
	
}
.sheet[data-is-fullscreen="true"] .sheet-resize-handle {
	display: none;
}


/* SHEETS: UI ELEMENTS */

/* Drag handle */
.sheet-drag-handle {
	position: relative;
	height: 25px;
	z-index: 2;
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	flex-flow: row;
	justify-content: stretch;
	align-items: center;
	padding-bottom: 1px;
	font-size: .625em;
	letter-spacing: .0125em;
	background-color: inherit;
	border-bottom: 1px dashed var(--sheet-content-fg);
	user-select: none;
}
.sheet-drag-handle-title {
	flex-grow: 1;
	margin-left: .75em;
	padding-top: 1px;
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-weight: 400;
}

/* Buttons */
.sheet-drag-handle-btn {
	height: 100%;
	aspect-ratio: 1;
	flex-grow: 0;
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 1.4em;
}
.sheet-drag-handle-btn.new-tab {
	padding-top: 6px;
	font-size: 21px;
	font-weight: 200;
	border-left: none;
}

/* Resize handle */
.sheet-resize-handle {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 3;
	width: 25px;
	height: 25px;
	opacity: 1;
	touch-action: none;
	background: linear-gradient(135deg, transparent 75%, var(--sheet-content-fg) 75%, transparent 79%);
	cursor: nwse-resize;
	opacity: 1;
}

/* Scrollbars */
.sheet-content-wrapper {
	scrollbar-color: var(--sheet-scrollbar-color) transparent;
}
.sheet-content-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.sheet-content-wrapper::-webkit-scrollbar-track {
	background: transparent;
}
.sheet-content-wrapper::-webkit-scrollbar-thumb {
	background: var(--sheet-scrollbar-color);
	border-radius: 4px;
}


/* SHEETS: SWITCHES */

/* Light/dark */
.sheet.bg-light {
	--sheet-content-fg: 				hsla(from var(--base-fg) h s l / 0.9);
	--sheet-content-link-fg:			hsl(235 90 40);
}
.sheet.bg-dark {
	--sheet-content-fg: 				hsla(from var(--base-bg) h s l / 0.8);
	--sheet-content-link-fg:			hsla(333 100 87.5 / 1);
}
.sheet.bg-light .sheet-content-wrapper a {
	mix-blend-mode: color-burn;
}

/* Remote data source */
.sheet.source-remote .sheet-drag-handle {
	color: white;
	background-color: black;
	border: 1px solid black;
}
.sheet.source-remote .sheet-drag-handle > * {
	color: white;
}
.sheet.source-remote .sheet-content-wrapper {
	margin-bottom: -0.125px;
}


/* SHEETS: CONTENT */

/* Sheet content */
.sheet-content-wrapper {
	z-index: 1;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: flex-start;
	flex-grow: 1;
	overflow-x: hidden;
	overflow-y: auto;
	font-family: "Authentic Sans 90", Arial, Helvetica, sans-serif !important;
	line-height: var(--sheet-content-line-height);
	color: var(--sheet-content-fg);
	/* margin-bottom: 1px; */
}
:is(.sheet.source-filetype-html, .sheet.source-remote) .sheet-content-wrapper {
	justify-content: stretch;
	align-items: stretch;
}
.sheet.source-local.source-filetype-html .sheet-content-wrapper {
	align-items: center;
}
.sheet.source-local.source-filetype-html .sheet-content-wrapper iframe {
	width: 100%;
	max-width: 90ch;
}
.sheet-content-wrapper .md-content {
	padding: .5em 1em;
	width: 100%;
	max-width: 90ch;
	padding-bottom: 20em;
}
.sheet-content-wrapper .md-content > :is(h1, h2, h3, h4, h5, h6, p, pre) {
	max-width: 75ch;
}
.sheet-content-wrapper .md-content :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: calc(.25em * var(--sheet-content-line-height));
}
.sheet-content-wrapper .md-content :is(h4, h5, h6),
.sheet-content-wrapper .md-content :is(h4, h5, h6) i {
	font-weight: bold;
}
.sheet-content-wrapper .md-content a {
	font-family: "Authentic Sans Condensed 90", Arial, Helvetica, sans-serif;
	color: var(--sheet-content-link-fg);
}
.sheet-content-wrapper .md-content b {
	font-weight: bold;
}
.sheet-content-wrapper .md-content b i {
	font-weight: bold;
	font-style: italic;
}
.sheet-content-wrapper .md-content em {
	padding: .075em  .175em;
	margin: -.075em -.175em;
	font-style: normal;
	background-color: var(--sheet-content-highlight-bg);
	border-radius: 2px;
}
.sheet-content-wrapper .md-content del {
	opacity: .25;
}
.sheet-content-wrapper .md-content .comment {
	font-family: "Recursive Sans Casual";
	font-weight: 400;
	font-size: 0.875em;
	font-style: italic;
	color: var(--sheet-content-link-fg);
}
.sheet-content-wrapper .md-content pre,
.sheet-content-wrapper .md-content *:not(pre) > code,
.sheet-content-wrapper .md-content tag {
	padding: .075em  .3em;
	font-family: "DM Mono", Courier, monospace;
	border-radius: 2px;
}
.sheet-content-wrapper .md-content pre,
.sheet-content-wrapper .md-content *:not(pre) > code {
	font-size: 0.875em;
	background-color: var(--sheet-content-code-bg);
}
.sheet-content-wrapper .md-content pre {
	padding: .85em 1em;
}
.sheet-content-wrapper .md-content tag {
	font-size: 0.75em;
	color: var(--sheet-content-text-faint);
	font-weight: 300;
	text-transform: uppercase;
	border: 1px solid var(--sheet-content-text-faint);
	background-color: transparent;
}
.sheet-content-wrapper .md-content img {
	height: auto;
	max-width: 100%;
}
.sheet-content-wrapper .md-content > img:first-child {
	margin: -.5em -1em;
	width: calc(100% + 2em);
	max-width: unset;
}
.sheet-content-wrapper .md-content .callout {
	font-size: var(--small-font-size);
	background: hsl(45 100 70);
	width: fit-content;
	max-width: 75%;
	padding: .5em .75em 1em;
	border-radius: 2px;
	box-shadow: var(--callout-shadow);
}
.sheet-content-wrapper .md-content ul,
.sheet-content-wrapper .md-content ol {
	padding-left: 1.5em;
}
.sheet-content-wrapper .md-content ul.checkbox {
	list-style-type: none;
	padding-left: 0.25em;
}
.sheet-content-wrapper .md-content ul.checkbox input {
	width: 1em;
	height: auto;
	margin-right: .5em;
}
.single-square-brackets {
	opacity: 0.25;
	font-size: .666em;
	font-weight: 600;
}

/* New tab button */
.btn-new-tab {
	position: absolute;
	bottom: 1.5em;
	right: 1.5em;
	padding: 0.625em 0.825em;
	color: hsla(from var(--sheet-content-link-fg) h s 20 / 1);
	background-color: var(--sheet-content-link-fg);
	border: 1px solid hsla(from var(--sheet-content-link-fg) h s 80 / 1);
	border-radius: .25em;
	box-shadow: 0.5px 5px 15px rgba(0,0,0,.15);
	cursor: pointer;
}


/* DELETE BUTTON */
#DeleteWrapper {
	position: fixed;
	bottom: -100px;
	right: 7vmin;
	height: 80px;
	width: auto;
	display: flex;
	z-index: 9999;
	transition: all 175ms ease-in-out;
	cursor: pointer;
}
.has-many-sheets #DeleteWrapper {
	bottom: 3.5vmin;
}
#Delete {
	filter: drop-shadow(-0.7px 10px 13px hsla(0 0 0 / 0.333));
}


/* ERROR MESSAGES */
.toast-message {
	position: fixed;
	bottom: 12.5vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	padding: .666em 1em;
	font-size: var(-smaller-font-size);
	color: var(--toast-fg);
	background: var(--toast-bg);
	border: 1px solid var(--toast-fg);
	border-radius: 1px;
	box-shadow: var(--sheet-shadow);
	transition: all 500ms;
}