@charset "utf-8";

/* --------------------------------------------------------------------------
   Base
-------------------------------------------------------------------------- */

	@font-face {
		font-family: 'Geologica';
		src: url('/fonts/geologica/variables.ttf') format('truetype');
		font-style: normal;
		font-weight: 100 900;
		font-display: swap;
	}

	@font-face {
		font-family: 'JetBrains Mono';
		src: url('/fonts/jetbrains/variables.ttf') format('truetype');
		font-style: normal;
		font-weight: 100 800;
		font-display: swap;
	}

	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: .15s ease-out both fade-out;
	}

	::view-transition-new(root) {
		animation: .15s ease-in both fade-in;
	}

	@keyframes fade-out {
		to {
			opacity: 0;
		}
	}

	@keyframes fade-in {
		from {
			opacity: 0;
		}
	}

	:root {
		--font-main: 'Geologica', Arial, sans-serif;
		--font-mono: 'JetBrains Mono', Consolas, monospace;
	}

	html {
		scrollbar-gutter: auto;
		scroll-behavior: smooth;
	}

	html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		color: #000;
		font-weight: var(--font-weight-regular);
		font-family: var(--font-main), serif;
	}

	body {
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		overscroll-behavior: none;
	}


/* --------------------------------------------------------------------------
   Native Dialog
-------------------------------------------------------------------------- */

	dialog {

		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100dvh;
		max-height: none;
		margin: 0;
		padding: 2rem;
		border: none;
		background: transparent;
		outline: none;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		&[open] {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		&[open]:has(~ dialog[open]) {
			overflow: hidden;
		}

		&[open]:has(~ dialog[open])::backdrop {
			background: transparent;
		}

		&::backdrop {
			background: rgba(0, 0, 0, .3);
			backdrop-filter: blur(.1rem);
		}

		/* Data */
		> section {

			flex: none;
			margin-block: auto;
			background: #FFF;
			border-radius: .5rem;
			overflow: hidden;

			> header {

				padding-inline: var(--space-base);
				box-sizing: border-box;
				border-bottom: none;
				height: var(--dialog-header-height);
				width: 100%;
				font-weight: 600;
				font-size: 1.5rem;
				letter-spacing: .01rem;
				padding: .5rem var(--space-base);
				background: var(--grey-fa-color);
				border-radius: .5rem .5rem 0 0;
				display: grid;
				gap: 1rem;
				grid-template-columns: 1fr auto;
				align-items: center;

				[data-action="dialog-close"] {

					width: 1.875rem;
					height: 1.875rem;
					margin-right: -.5rem;
					cursor: pointer;
					transition: var(--transition);
					stroke: var(--grey-b4-color);

					&:hover {
						stroke: var(--green-color);
						scale: 1.1;
					}

				}

			}

		}

	}