@layer components {
	:root {
		--font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	}

	.badge,
	.noselect {
		-webkit-user-select: none; /* Safari */
		-moz-user-select: none;    /* Firefox */
		-ms-user-select: none;     /* Internet Explorer/Edge (old) */
		user-select: none;         /* Standard */
	}

	/* Link Normalization for both badges and cards */
	.badge > a, .card > a, a.badge, a.card { text-decoration: none; }
	.badge > a, .card > a { color: inherit; }

	/* Folder-Tag Appearance */
	.badge {
		color: #444;
		background-color: #f3efe7; /* cream */
		border: 1px solid #e4dcc7; /* soft beige */

		display: inline-block;
		font-family: var(--font-code);
		font-size: 0.85rem;
		line-height: 1.2;

		border-radius: 0.4rem;
		padding: 0.1rem 0.45rem;
		min-width: 6ch;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;

		transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
	}
	.badge:hover,
	.badge:focus-visible {
		outline: 2px solid transparent;
		background-color: #efe7d6;
		border-color: #ded3b6;
		box-shadow: 0 0 0 2px #f3efe7, 0 0 0 4px #e4dcc7;
	}

	/* Glassy-Clickable Appearance */
	.card {
		color: var(--main-text-color);
		display: block;
		padding: 0.75rem;
		border-radius: 10px;
		box-shadow: 0 1px 0 rgba(0,0,0,.06);
		transition: background-color 120ms ease, box-shadow 120ms ease;
	}
	.card:hover,
	.card:focus-visible {
		outline: 2px solid transparent;
		background-color: var(--main-bg-accent);
		box-shadow: 0 6px 18px rgba(0,0,0,.12);
	}

	/* Accessibility */
	@media (prefers-reduced-motion: reduce) {
		.badge, .card { transition: none; }
	}
	@media (max-width: 600px) {
		.card { padding: 0.6rem; }
	}

	/* Markdown-generated Content */
	article {
		p {
			line-height: 1.6;
			margin-bottom: 1.25rem;
			color: var(--main-text-color);
			font-size: 1rem;

			&:last-child {
				margin-bottom: 0;
			}

			&:first-of-type {
				font-size: 1.1rem;
				color: var(--main-text-accent);
			}
		}

		a {
			color: var(--main-link-color);
			&:visited {
				color: var(--main-link-accent);
			}
		}
		.footnotes a.footnote-backref:visited,
		.footnote-ref a:visited {
			color: var(--main-link-color);
		}

		li:has(p) {
			margin-bottom: 1.25rem;
		}
		li > p {
			display: inline;
		}
		.footnotes li {
			margin: 0;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			margin: 1.5rem 0;
			font-size: 0.95rem;

			th, td {
				padding: 0.75rem 1rem;
				text-align: left;
				border-bottom: 1px solid var(--main-border);
			}

			th {
				background: var(--main-bg-accent);
				color: var(--main-text-accent);
				font-weight: 600;
				font-size: 0.9rem;
				text-transform: uppercase;
				letter-spacing: 0.05em;
			}

			tbody tr:nth-child(odd) {
				background: var(--main-bg-primary);
			}

			tbody tr:nth-child(even) {
				background: var(--main-bg-secondary);
			}

			tbody tr:hover {
				background: color-mix(in srgb, var(--main-bg-accent) 30%, transparent);
			}

			@media (max-width: 600px) {
				font-size: 0.85rem;

				th, td {
					padding: 0.5rem 0.75rem;
				}
			}
		}

		blockquote {
			border-left: 3px solid var(--main-border);
			padding-left: 1.5rem;
			margin: 1.5rem 0;
			color: var(--main-text-muted);
			font-style: italic;

			p {
				margin-bottom: 0.75rem;
			}
		}

		code {
			background: var(--wash-subtle);
			padding: 0.2em 0.4em;
			border-radius: 3px;
			font-size: 0.9em;
			font-family: var(--font-code);
		}

		pre code {
			background: none;
			padding: 0;
			font-family: var(--font-code);
		}

		h1, h2     { color: var(--main-text-accent); }
		h3, h4, h5 { color: var(--main-text-color); }
		h6         { color: var(--main-text-muted); }

		h1 {
			font-size: 2rem;
			margin: 0 0 1rem 0;
			font-weight: 600;
		}
		h2 {
			font-size: 1.5rem;
			margin: 2rem 0 1rem 0;
			font-weight: 600;
		}
		h3 {
			font-size: 1.25rem;
			margin: 1.5rem 0 0.75rem 0;
			font-weight: 600;
		}
		h4 {
			font-size: 1.125rem;
			margin: 1.25rem 0 0.5rem 0;
			font-weight: 500;
		}
		h5 {
			font-size: 1rem;
			margin: 1rem 0 0.5rem 0;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}
		h6 {
			font-size: 1rem;
			margin: 1rem 0 0.25rem 0;
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 0.1em;
		}
	}

	/* Discord Buttons */
	.discord-invite {
		display: inline-flex;
		align-items: center;
		padding: 12px 20px;
		background-color: #5865F2; /* Discord Blurple */
		color: white;
		text-decoration: none;
		border-radius: 4px;
		font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: 500;
		transition: all 0.17s ease;
		border: none;
		cursor: pointer;
		white-space: nowrap;

		&:hover {
			background-color: #4752C4; /* Darker Discord Blurple */
			text-decoration: none;
		}
		&:active {
			background-color: #3C45A5;
		}

		/* Discord Logo - Using CSS to create the logo */
		&::before {
			content: '';
			width: 20px;
			height: 20px;
			margin-right: 8px;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36'%3E%3Cpath fill='white' d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		/* Large version */
		&.large {
			padding: 16px 24px;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 600;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			&:hover {
				transform: translateY(-1px);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
			}
			&:active {
				transform: translateY(0);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}
			&::before {
				width: 24px;
				height: 24px;
				margin-right: 12px;
			}
		}

		/* Compact version */
		&.compact {
			padding: 8px 16px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;

			&::before {
				width: 16px;
				height: 16px;
				margin-right: 6px;
			}
		}
	}

	/* Size-equalizing container */
	.button-group {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		width: max-content;                  /* shrink-wrap to N * widest */
		max-width: 100%;                     /* cap so it doesn't overflow parent */
		gap: .5rem;

		& > * {
			white-space: nowrap;             /* measure true intrinsic width */
			box-sizing: border-box;          /* include padding/border in the calc */
		}

		&:not(.fit) > * {
			min-width: max-content;          /* equalize to widest */
		}

		/* 1/N-of-parent with auto wrapping */
		&.fit {
			grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
			width: 100%;
		}
	}
}