/* =====================================================================
   SAHURLE ENCYCLOPEDIA — Common.css  (generation 2, rebuilt from zero)
   Blueprint: /DESIGN.md. Sections mirror the spec.
   Class names are UNCHANGED — HTML, Astro components and ui.js
   keep working exactly as before.
   ===================================================================== */

/* 1 · TOKENS (DESIGN.md §1–§4) -------------------------------------- */
:root {
	/* surfaces */
	--surface-sunken: #0b0b1b;
	--surface-panel: #0d0d1b;
	--surface-page: #15152a;
	--surface-tint: rgba(127, 127, 255, 0.08);
	--surface-tint-strong: rgba(127, 127, 255, 0.14);
	--surface-chrome: rgba(13, 13, 27, 0.85);
	/* legacy names kept because older files reference them */
	--background: #15152a;
	--searchbar-dark: #0b0b1b;
	/* text */
	--text: #cfcff7;
	--text-secondary: #a5a5ff;
	/* lines */
	--accent: #494969;
	--border-faded: #6565ff42;
	/* links */
	--link: #7f7fff;
	--link-hover: #bbbbff;
	--redlink: #ff3488;
	--redlink-hover: #fd40b8;
	/* DEPRECATED — never use in new code; exists only for old scoped styles */
	--secondary: #2a2a3c;
	--hover: #34344b;
	/* the only easing transform is allowed to use */
	--ease-pop: cubic-bezier(0.68, -0.4, 0.32, 1.4);
}

/* 2 · RESET & BASE --------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
*:not(dialog) { margin: 0; }
html { scroll-behavior: smooth; }
body {
	font-family: "Hanken Grotesk", sans-serif;
	background-color: var(--surface-page);
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* 3 · LAYOUT (DESIGN.md §6) ------------------------------------------ */
#content {
	width: 60%;
	max-width: 1200px;
	margin: 80px auto 0;
	padding: 20px 0;
	display: flow-root;
}
#slot-content { display: flow-root; margin-top: 1%; line-height: 1.6; }

/* Sidebar-TOC mode: the grid has exactly two children, nothing else */
@media (min-width: 901px) {
	#content.has-toc {
		display: grid;
		grid-template-columns: 10.5rem minmax(0, 1fr);
		column-gap: 2.5rem;
		width: 72%;
		max-width: 1400px;
	}
	#content.has-toc > .toc-sidebar {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 80px;
		align-self: start;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
	#content.has-toc > .content-main { grid-column: 2; min-width: 0; }
}

/* 4 · TYPOGRAPHY (DESIGN.md §3) -------------------------------------- */
#content > h1,
.content-main > h1 {
	font-size: 1.8rem;
	line-height: 1.2;
	padding-bottom: 0.2em;
	margin-bottom: 0.3em;
}
#slot-content h2 {
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 1.2em 0 0.6em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--border-faded);
	display: flow-root;
}
#slot-content h3 { font-size: 1.2rem; line-height: 1.4; margin: 1em 0 0.5em; }
#slot-content h4 { font-size: 1rem; line-height: 1.4; margin: 0.9em 0 0.4em; }
#slot-content h5 { font-size: 0.92rem; line-height: 1.4; margin: 0.8em 0 0.3em; }
#slot-content h6 { font-size: 0.85rem; line-height: 1.4; margin: 0.8em 0 0.3em; }
#slot-content h2,
#slot-content h3,
#slot-content h4,
#slot-content h5,
#slot-content h6 { scroll-margin-top: 80px; }
#slot-content > p { margin: 0.65em 0; }
#slot-content ul,
#slot-content ol { margin: 1em 0; padding-left: 2em; }
#slot-content li { margin-bottom: 0.5em; }
#slot-content code {
	background: var(--surface-tint-strong);
	color: #ffb7e7;
	padding: 0.2em 0.4em;
	border-radius: 4px;
	font-family: monospace;
}
#slot-content blockquote {
	border-left: 3px solid var(--link);
	padding-left: 15px;
	margin: 1em 0;
	font-style: italic;
	color: var(--text-secondary);
}
.subtitle { color: var(--text-secondary); font-size: 0.95rem; }
.stats {
	color: var(--text-secondary);
	font-size: 0.75rem;
	font-style: italic;
	margin-top: -4px;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--border-faded);
}
.hatnote {
	font-style: italic;
	font-size: 0.9rem;
	color: var(--text-secondary);
	padding-left: 1.6em;
	margin: 0.4em 0 0.8em;
	line-height: 1.5;
}

/* 5 · LINKS (DESIGN.md §5) -------------------------------------------- */
a { color: var(--link); text-decoration: none; }
a:hover {
	color: var(--link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.redlink {
	color: var(--redlink) !important;
	text-decoration: underline dotted !important;
	text-underline-offset: 3px;
}
.redlink:hover { color: var(--redlink-hover) !important; }

/* 6 · CHROME: TOPBAR + SEARCH (DESIGN.md §8) -------------------------- */
#topbar {
	position: fixed;
	inset: 0 0 auto 0;
	height: 60px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid transparent;
	z-index: 1000;
	/* the one blessed background crossfade */
	transition: background 0.25s cubic-bezier(0, 0.97, 0.58, 1),
		backdrop-filter 0.25s cubic-bezier(0, 0.97, 0.58, 1),
		-webkit-backdrop-filter 0.25s cubic-bezier(0, 0.97, 0.58, 1),
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}
.topbar-initial { background: transparent; }
.topbar-sticky {
	background: var(--surface-chrome);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.topbar-inner {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
}
.topbar-logo {
	height: 30px;
	width: auto;
	user-select: none;
	pointer-events: none;
	-webkit-user-drag: none;
}
.logo:hover .topbar-logo { filter: drop-shadow(0 0 6px var(--accent)); }
.search-container { position: relative; width: 100%; max-width: 500px; }
.search-box {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 100%;
	height: 40px;
	padding: 0 10px 0 40px;
	background-color: var(--surface-sunken);
	border: 1px solid var(--accent);
	border-radius: 8px;
	cursor: text;
}
.search-box:hover { border-color: var(--link); }
.search-box:focus-within { border-color: var(--link); box-shadow: 0 0 0 6px var(--surface-tint); }
.search-box__icon {
	position: absolute;
	left: 14px;
	width: 16px;
	height: 16px;
	color: var(--text-secondary);
	stroke-width: 1.5;
	pointer-events: none;
}
.search-box__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--text);
	font: inherit;
	font-size: 14px;
	letter-spacing: -0.005em;
}
.search-box__input::placeholder { color: var(--text-secondary); }
.search-box__input::-webkit-search-cancel-button,
#site-search::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	height: 16px;
	width: 16px;
	cursor: pointer;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
}
.search-results-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	background-color: var(--surface-sunken);
	border: 1px solid var(--accent);
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	overflow: hidden;
	z-index: 1001;
	padding: 6px;
}
.search-results-dropdown a { display: block; color: var(--text); padding: 10px 12px; border-radius: 6px; }
.search-results-dropdown a:not(:last-child) { margin-bottom: 2px; }
.search-results-dropdown a:hover {
	background-color: var(--surface-tint);
	color: var(--link-hover);
	text-decoration: none;
}

/* 7 · SIDEBAR TOC ------------------------------------------------------ */
.toc-sidebar { font-size: 0.85rem; line-height: 1.45; padding-top: 0.4rem; }
.toc-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border-faded);
	margin-bottom: 0.6rem;
}
.toc-title { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.toc-toggle {
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--text-secondary);
	font: inherit;
	font-size: 0.75rem;
	padding: 2px 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: transform 0.25s var(--ease-pop);
}
.toc-toggle:hover {
	background: var(--surface-tint);
	border-color: var(--link);
	color: var(--link-hover);
	transform: scale(1.05);
}
.toc-toggle:active { transform: scale(0.96); }
.toc-list,
.toc-list ol { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin: 0 0 0.55em; }
.toc-list a { display: block; color: var(--link); border-radius: 4px; }
.toc-list a:hover { color: var(--link-hover); text-decoration: none; }
.toc-list a.toc-active { color: var(--link-hover); font-weight: 600; }
.toc-list .toc-h3 { padding-left: 0.9rem; font-size: 0.8rem; }
.toc-collapsed .toc-list { display: none; }
@media (max-width: 900px) {
	.toc-sidebar {
		background: var(--surface-sunken);
		border: 1px solid var(--accent);
		border-radius: 8px;
		padding: 0.8rem 1rem;
		margin: 0.8rem 0 1.2rem;
	}
	.toc-head { margin-bottom: 0; }
	.toc-sidebar:not(.toc-collapsed) .toc-head { margin-bottom: 0.6rem; }
}

/* 8 · CATEGORIES ------------------------------------------------------- */
.categories-box {
	margin-top: 1.2em;
	padding-top: 0.8em;
	border-top: 1px solid var(--border-faded);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.85rem;
	color: var(--text-secondary);
}
.categories-label,
.categories-box > span {
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.categories-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--surface-sunken);
	border: 1px solid var(--accent);
	color: var(--link);
	font-weight: 500;
	font-size: 0.8rem;
	line-height: 1.4;
	transition: transform 0.25s var(--ease-pop);
}
.cat-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
	flex-shrink: 0;
}
.cat-pill:hover {
	background: var(--surface-tint-strong);
	border-color: var(--link);
	color: var(--link-hover);
	text-decoration: none;
	transform: scale(1.05);
}
.cat-pill:active { transform: scale(0.96); }

/* 9 · FOOTER ------------------------------------------------------------ */
#site-footer {
	margin-top: -0.5em;
	background-color: var(--surface-chrome);
	padding: 3rem 2rem 1.5rem;
	color: var(--text);
	font-size: 0.9rem;
}
.footer-content {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr;
	gap: 2rem;
	align-items: start;
}
.footer-col h4 {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-secondary);
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border-faded);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.footer-col a,
.footer-meta a { color: var(--link); }
.footer-col a:hover,
.footer-meta a:hover { color: var(--link-hover); text-decoration: none; }
.footer-brand {
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.footer-logo { height: 4em; width: auto; user-select: none; pointer-events: none; -webkit-user-drag: none; }
.footer-legal .disclaimer { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.footer-bottom {
	max-width: 1200px;
	margin: 2rem auto 0;
	padding-top: 1rem;
	border-top: 1px solid var(--border-faded);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}

/* 10 · SCROLLBAR --------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-page); }
::-webkit-scrollbar-thumb {
	background: var(--accent);
	border-radius: 5px;
	border: 2px solid var(--surface-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--link); }

/* 11 · LIST UTILITIES (MediaWiki parity) ---------------------------------- */
.hlist ul { margin: 0; padding: 0; list-style: none; display: inline; }
.hlist li { display: inline; }
.hlist li:not(:last-child)::after {
	content: " • ";
	white-space: pre;
	color: var(--text-secondary);
	font-size: 0.9em;
}
.plainlist ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.plainlist li { list-style: none !important; line-height: 1 !important; }
.bulleted-list ul { list-style-type: disc !important; margin: 0; padding-left: 15px; }

/* 12 · RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 768px) {
	#content { width: 90%; }
	#content > h1,
	.content-main > h1 { font-size: 1.6rem; }
	#slot-content h2 { font-size: 1.4rem; }
	#slot-content h3 { font-size: 1.1rem; }
	#slot-content > p { font-size: 80%; } /* legacy mobile reading size */
	.topbar-inner { width: 95%; gap: 10px; }
	.topbar-logo { height: 25px; }
	.search-container { flex: 1; max-width: none; }
	.footer-content { grid-template-columns: 1fr; gap: 1.5rem; }
	.footer-bottom { flex-direction: column; text-align: center; }
	.categories-box { gap: 6px; font-size: 0.8rem; }
	.cat-pill { padding: 3px 10px; font-size: 0.75rem; }
}