/* Variables ------ */

:root,
:host {
	--color-muted: var(--pico-color-slate-500);
	--color-success: var(--pico-color-jade-500);
	--color-error: var(--pico-color-red-500);
	--color-warning: var(--pico-color-amber-200);
}


/* Layout ------ */

.app-header, .app-footer {
	position: fixed;
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filter: blur(1rem);
	background-color: transparent;
	border-bottom-color: var(--pico-header-border-color);
	box-shadow: var(--pico-card-box-shadow);
	padding-block: .5em;
	z-index: 100;
	overflow-x: auto;
}

.app-header {
	inset: 0 0 auto 0;
}

.app-footer {
	inset: auto 0 0 0;
}

.app-main {
	padding: 6rem 0;
	min-height: 100vh;
	min-height: 100dvh;
}

.app-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

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

.app-nav li {
	display: block
}

.app-nav a {
	display: flex;
	align-items: center;
	gap: .5em;
	margin-top: 0;
	margin-bottom: 0; 
}

.app-nav a:hover {
	text-decoration: none;
}

.app-title a {
	font-size: 1.25rem;
	font-weight: bold;
	color: var(--pico-contrast);
}

.app-title em {
	color: var(--pico-color);
}

/* Preview toggle ------ */

.preview-toggle {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.preview-toggle label {
	font-weight: bold;
	color: var(--color-muted);
}

/* Editor ------ */

.editor__header {
	position: sticky;
	top: 4rem;
	z-index: 120;
	overflow-x: auto;
}

.editor__toolbar {
	display: block;
	margin: 0 auto;
	font-size: 1.5em;
	
}

.editor__toolbar ul {
	display: flex;
	align-items: center;
}

.editor__toolbar li {
	display: block
}

.editor__toolbar a {
	display: flex;
	align-items: center;
	margin-top: 0;
	margin-bottom: 0; 
	text-decoration: none;
}

/* Dialog ------ */

.modal__content {
	max-width: 480px;
}
 
.modal__header {
	margin-bottom: 1.25em;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Progressbar ------ */

progress.progress--invalid::-webkit-progress-value {
  background-color: var(--color-error);
}

progress.progress--has-label {
	margin-bottom: 0;
}

/* Payload ------ */

.payload-container {
	padding: 1.5em;
}

.payload-container > :last-child {
	margin-bottom: 0;
}

.payload-entry {
	text-decoration: none;
}

.payload-entry__title {
	margin: 0;
}

.payload-entry__date {
	text-decoration: none;
}

.payload-qr {
	max-width: 280px;
	height: auto;
	margin: 0 auto;
}

/* Utilities ------ */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-muted { color: var(--color-muted); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

/* Material icons ------ */

@font-face {
	font-family: 'Material Symbols Sharp';
	src:
		url('/assets/fonts/icons.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

.ms-icon {
	font-family: 'Material Symbols Sharp';
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	display: inline-block;
	line-height: 1;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.ms-icon--sm {
	font-size: .85em;
}

.ms-icon--md {
	font-size: 1.25em;
}

.ms-icon--lg {
	font-size: 1.5em;
}

.ms-icon--xl {
	font-size: 1.75em;
}

.ms-icon--xxl {
	font-size: 2em;
}

/* AlpineJS ------ */

[x-cloak] { 
	display: none !important; 
}

/* Codemirror theme ------ */

.ͼ1 {
	font-size: 16px;
}

.ͼ1.cm-focused {
	outline: none;
}

.cm-cursor { 
	border-left-color: var(--pico-color-slate-500) !important; 
}

.ͼ5 {
	color: var(--pico-color-slate-200);
}

.ͼ7 {
	font-size: 1.25em;
}

.ͼc {
	color: var(--pico-primary);
}

@media only screen and (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		.ͼ5 {
			color: var(--pico-color-slate-800);
		}
	}
}

[data-theme="dark"] {
	.ͼ5 {
		color: var(--pico-color-slate-600);
	}
}