/* ---- Polish -----------------------------------------------------------------
   A restyle laid over style.css. Everything here only overrides, so removing the
   <link> to this file in _Layout.cshtml (or restoring _Layout.cshtml.bak) puts the
   site back exactly as it was. Graph and editor pages load their own sheets after
   this one and keep their look. */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

:root {
	--font-prose: 'Crimson Pro', Georgia, 'Times New Roman', serif;
	--radius: 6px;
	--color-text-main: #2a2420;
	--color-text-muted: #4a423b;
	--color-link: #2f2925;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0c0b0b;
		--color-bg-soft: #151413;
		--color-surface: #1c1a19;
		--color-surface-open: #2b2826;
		--color-text-main: #d4cdc2;
		--color-text-muted: #a39b90;
		--color-link: #c9c2b7;
	}

	/* A faint wash of the world's colour at the top of the page, so each world feels like its own place. */
	body:not(.graph-page):not(.editor-page) {
		background:
			radial-gradient(1100px 520px at 50% -12%, color-mix(in srgb, var(--color-active) 13%, transparent), transparent 70%),
			var(--bg);
		background-attachment: fixed;
	}
}

::selection {
	background: color-mix(in srgb, var(--color-active) 35%, transparent);
}

:focus-visible {
	outline: 2px solid var(--color-active);
	outline-offset: 2px;
}

/* ---- The article ---------------------------------------------------------- */

.container main {
	font-family: var(--font-prose);
	font-size: 1.22rem;
	background: transparent;
}

	.container main p,
	.container main li {
		line-height: 1.62;
		color: var(--color-text-main);
	}

	.container main > h1,
	.container main > h2,
	.container main > h3,
	.container main > h4 {
		border-bottom: none;
		padding-bottom: 0.45rem;
		background: linear-gradient(90deg, var(--color-active), color-mix(in srgb, var(--color-active) 25%, transparent) 60%, transparent) left bottom / 100% 2px no-repeat;
		letter-spacing: 0.01em;
	}

	.container main > h1 {
		font-size: clamp(2.3rem, 5vw, 3.2rem);
		margin-top: 0.5rem;
		background-size: 100% 3px;
	}

	.container main > h2 {
		font-size: 1.85rem;
		margin-top: 2.6rem;
	}

	.container main > h3 {
		font-size: 1.4rem;
		background-size: 40% 1px;
	}

	.container main > h4 {
		font-size: 1.15rem;
		background: none;
	}

	.container main a {
		color: var(--color-active);
		text-decoration: underline;
		text-decoration-color: color-mix(in srgb, var(--color-active) 40%, transparent);
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
		transition: text-decoration-color 0.15s ease;
	}

		.container main a:hover {
			text-decoration-color: currentColor;
		}

	.container main > blockquote:not(.dnd) {
		margin: 1.5rem 0;
		padding: 0.6rem 1.2rem;
		border-left: 3px solid var(--color-active);
		background: var(--color-active-soft);
		border-radius: 0 var(--radius) var(--radius) 0;
		font-style: italic;
	}

	.container main > ul,
	.container main > ol {
		padding-left: 1.4rem;
	}

		.container main > ul > li::marker {
			color: var(--color-active);
		}

	.container main > table {
		font-family: var(--font-ui);
		font-size: 0.95rem;
		border: 1px solid var(--color-surface-open);
		border-radius: var(--radius);
		border-collapse: separate;
		border-spacing: 0;
		overflow: hidden;
	}

	.container main > hr {
		height: 1px;
		margin: 2.5rem 0;
		background: linear-gradient(90deg, transparent, var(--color-active), transparent);
	}

/* ---- The menu ------------------------------------------------------------- */

.container > nav header {
	padding: 0.75rem 0 0.5rem;
	justify-content: center;
}

.container > nav .portal-back {
	margin-left: 0.25rem;
	font-size: 0.75rem;
}

.identity {
	border-radius: var(--radius);
}

.nav-search input,
.search input,
.search button {
	border-radius: var(--radius);
}

.nav-search input {
	padding: 0.45rem 0.7rem;
}

#nav-toggle,
.graph-link-nav {
	border-radius: var(--radius);
	border-color: color-mix(in srgb, var(--color-active) 55%, transparent);
	background: color-mix(in srgb, var(--color-active) 6%, transparent);
	font-weight: 600;
	letter-spacing: 0.03em;
	transition: background 0.15s ease, border-color 0.15s ease;
}

	#nav-toggle:hover,
	.graph-link-nav:hover {
		border-color: var(--color-active);
	}

/* The tree: indent guides instead of stacked blocks, and quiet markers instead of emoji. */
.container > nav ul ul {
	margin-left: 0.85rem;
	padding-left: 0.55rem;
	border-left: 1px solid var(--color-surface-open);
}

.container > nav li.folder > details > summary {
	gap: 0.55rem;
	margin: 1px 0;
	padding: 0.4rem 0.55rem;
	background: transparent;
	border-left: none;
	border-radius: var(--radius);
	font-weight: 600;
	color: var(--color-text-main);
	list-style: none;
}

	.container > nav li.folder > details > summary::-webkit-details-marker {
		display: none;
	}

	.container > nav li.folder > details > summary:hover {
		background: var(--color-surface);
	}

.container > nav li.folder > details[open] > summary {
	border-left: none;
	background: transparent;
	color: var(--color-active);
}

	.container > nav li.folder > details[open] > summary:hover {
		background: var(--color-surface);
	}

/* A chevron that turns when the folder opens. */
.container > nav li.folder > details > summary::before,
.container > nav li.folder.world > details > summary::before,
.container > nav li.folder.plane > details > summary::before,
.container > nav li.folder.realm > details > summary::before {
	content: "" !important;
	flex: none;
	width: 0.42em;
	height: 0.42em;
	margin: 0 0.15rem 0 0.1rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
	color: inherit;
	opacity: 0.7;
}

.container > nav li.folder > details[open] > summary::before {
	transform: rotate(45deg);
}

.container > nav li.folder > details > summary a {
	color: inherit;
	text-decoration: none;
}

	.container > nav li.folder > details > summary a.active {
		color: var(--color-active);
	}

.container > nav li.file {
	gap: 0.55rem;
	padding: 0 0 0 0.6rem;
	background: none;
}

	.container > nav li.file::before {
		content: "";
		flex: none;
		width: 4px;
		height: 4px;
		margin: 0;
		border-radius: 50%;
		background: currentColor;
		opacity: 0.35;
	}

	.container > nav li.file a {
		flex: 1;
		padding: 0.28rem 0.5rem;
		border-radius: var(--radius);
		transition: background 0.12s ease, color 0.12s ease;
	}

		.container > nav li.file a:hover {
			background: var(--color-surface);
			color: var(--color-active);
		}

		.container > nav li.file a.active {
			margin-left: 0;
			padding-left: 0.5rem;
			border-left: none;
			background: var(--color-active-soft);
		}

/* ---- Connections ---------------------------------------------------------- */

.relations a {
	border-radius: 0 var(--radius) var(--radius) 0;
	transition: background 0.12s ease, color 0.12s ease;
}

/* ---- Portal --------------------------------------------------------------- */

/* The portal's <main> picks up the article's solid ground; let the page wash show through. */
.portal-main {
	background: transparent;
}

.portal-header h1 {
	letter-spacing: 0.02em;
	text-shadow: 0 0 40px color-mix(in srgb, var(--color-active) 35%, transparent);
}

.portal-header p {
	font-family: var(--font-prose);
	font-style: italic;
	font-size: 1.3rem;
	text-transform: none;
}

.tile {
	border-radius: 10px;
	border-top-width: 3px;
	background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-soft) 100%);
}

.tile-cover {
	transition: transform 0.4s ease;
}

.tile:hover .tile-cover,
.tile:focus-visible .tile-cover {
	transform: scale(1.04);
}

/* Accents are picked for parchment; on a dark card they need lifting to be read. */
@media (prefers-color-scheme: dark) {
	.tile-body h2 {
		color: color-mix(in srgb, var(--tile-accent, var(--color-active)) 70%, white);
	}
}

.tile-blurb {
	font-family: var(--font-prose);
	font-size: 1.08rem;
	line-height: 1.5;
}

/* ---- Footer: small, quiet, out of the way --------------------------------- */

footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 3rem 1rem 2rem;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	opacity: 0.6;
}

	footer .footer-rule {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		width: min(16rem, 70%);
		font-size: 0.7rem;
		color: var(--color-active);
		letter-spacing: 0;
	}

		footer .footer-rule::before,
		footer .footer-rule::after {
			content: "";
			flex: 1;
			height: 1px;
			background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-active) 60%, transparent));
		}

		footer .footer-rule::after {
			transform: scaleX(-1);
		}

/* ---- Phone ---------------------------------------------------------------- */

@media (max-width: 768px), (pointer: coarse), (orientation: portrait) {
	.has-drawer .mobile-bar {
		background: color-mix(in srgb, var(--color-bg-soft) 85%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-bottom-width: 1px;
	}

	.menu-button,
	.links-button {
		border-radius: var(--radius);
	}

	.container main {
		font-size: 1.15rem;
		padding: 10px 16px;
	}

	.container > nav li.file a {
		padding: 0.6rem 0.5rem;
	}

	.container > nav li.folder > details > summary {
		padding: 0.6rem 0.55rem;
	}
}