@layer reset, layout, pages, components;

@layer view-transitions {
	@view-transition {
		navigation: auto;
	}

	/* #detail main {
		img {
			view-transition-name: profile-avatar;
		}
		h1 {
			view-transition-name: profile-name;
		}
	} */
}

@layer pages {
	@layer general {

	}

	@layer overview {
		#overview {

		}
	}

	@layer detail {
		#detail {
			main {
				display: grid;
				grid-template: "name name" auto
				               "avatar bio" auto / auto 1fr;
				gap: 1em;

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

			h1 {
				grid-area: name;

				display: inline;
				width: fit-content;
			}

			main img {
				grid-area: avatar;

				display: block;
				width: 10em;
				aspect-ratio: 1;
				border-radius: 50%;
			}

			main p {
				grid-area: bio;
			}
		}
	}
}

@layer components {
	@layer profiles {
		.profiles {
			list-style: none;

			li {
				margin: 0.25em 0;
			}

			a {
				text-decoration: none;

				display: flex;
				flex-direction: row;
				gap: 0.5em;
				padding: 0.5em;
				align-items: center;

				color: black;
				text-decoration: none;

				&:hover {
					background: #f4f4f4;
				}
			}

			img {
				height: 2em;
				width: 2em;
				border-radius: 50%;
				display: inline-block;
			}
		}
	}
}

@layer layout {
	html {
		background-color: white;
		height: 100%;
		width: 100%;

		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	body {
		height: 100%;
		width: 100%;
	}

	main, footer, aside {
		max-width: 60em;
		margin: 0 auto 4em;
		padding: 1em;
	}

	footer {
		font-style: italic;
		text-align: center;
	}
}

@layer reset {
	* {
		box-sizing: border-box;
	}
	html, body, ul[class] {
		margin: 0;
		padding: 0;
	}
}

@layer warnings {
	/* Warnings and Preferences */
	@media (prefers-reduced-motion: reduce) {
		.warning[data-reason="prefers-reduced-motion"] {
			display: block;
		}
	}

	@supports not (view-transition-name: works) {
		.warning[data-reason="same-document-view-transitions"] {
			display: block;
		}
	}

	.warning[data-reason="cross-document-view-transitions"] {
		/* JS will show this warning when needed */
	}

	.warning[data-reason="navigation-api"] {
		/* JS will show this warning when needed */
	}

	.warnings {
		position: fixed;
		bottom: 1em;
		left: 1em;
		right: 1em;
		view-transition-name: warning; /* Don’t transition this with the rest of the stuff */
	}

	@layer warning {
		.warning {
			box-sizing: border-box;
			padding: 1em;
			margin: 1em 0;
			border: 1px solid #ccc;
			background: rgba(255 255 205 / 0.8);
			display: none;
		}

		.warning > :first-child {
			margin-top: 0;
		}

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

		.warning a {
			color: blue;
		}
		.warning--info {
			border: 1px solid #123456;
			background: rgb(205 230 255 / 0.8);
		}
		.warning--alarm {
			border: 1px solid red;
			background: #ff000010;
		}
	}
}