:root {
	--spacing-0: 0px;
	--spacing-1: 2px;
	--spacing-2: 4px;
	--spacing-3: 6px;
	--spacing-4: 9px;
	--spacing-5: 15px;
	--spacing-6: 24px;
	--spacing-7: 38px;
	--spacing-8: 62px;
	--spacing-9: 100px;
	--spacing-10: 162px;
	--spacing-11: 262px;
	--spacing-12: 424px;
	--spacing-13: 685px;
	--spacing-14: 1109px;

	--radius-xs: 2px;
	--radius-s: 5px;
	--radius-m: 8px;
	--radius-l: 13px;
	--radius-xl: 22px;
	--radius-round: 10000px;

	--font-xxs: 13px;
	--font-xs: 14px;
	--font-s: 15px;
	--font-m: 17px;
	--font-l: 23.46px;
	--font-xl: 32.378px;
	--font-xxl: 44.68px;

	--color-hue: 187;

	--color-text-primary: hsl(var(--color-hue) 8% 10%);
	--color-text-secondary: hsl(var(--color-hue) 8% 42%);
	--color-text-tertiary: hsl(var(--color-hue) 8% 60%);

	--color-accent-primary-base: hsl(var(--color-hue) 65% 42%);
	--color-accent-primary: var(--color-accent-primary-base);
	--color-accent-primary-hover: oklch(from var(--color-accent-primary) calc(l + 0.062) calc(c + 0.02) h);
	--color-accent-primary-active: oklch(from var(--color-accent-primary) calc(l + 0.1) calc(c + 0.0324) h);

	--color-bg-primary: hsl(0 0% 100%);
	--color-bg-secondary: hsl(var(--color-hue) 8% 98%);
	--color-bg-tertiary: hsl(var(--color-hue) 8% 96%);
	--color-bg-tertiary-hover: hsl(var(--color-hue) 8% 93%);
	--color-bg-tertiary-active: hsl(var(--color-hue) 8% 90%);

	--color-line-primary: hsl(var(--color-hue) 4% 80%);
	--color-line-secondary: hsl(var(--color-hue) 4% 90%);
	--color-line-tertiary: hsl(var(--color-hue) 20% 70%);

	--preview-height: 0px;
	--header-height: var(--spacing-8);
	--header-bg: hsl(0, 0%, 100%, 0.925);
	--sidebar-width: calc(var(--spacing-11) + var(--spacing-7));
}

.dark-theme {
	--color-text-primary: hsl(var(--color-hue), 8%, 95%);
	--color-text-secondary: hsl(var(--color-hue) 8% 75%);
	--color-text-tertiary: hsl(var(--color-hue) 8% 60%);
	--color-accent-primary: oklch(from var(--color-accent-primary-base) calc(l + 0.05) calc(c + 0.01) h);
	--color-bg-primary: hsl(var(--color-hue) 8% 10%);
	--color-bg-secondary: hsl(var(--color-hue) 8% 12%);
	--color-bg-tertiary: hsl(var(--color-hue) 8% 15%);
	--color-bg-tertiary-hover: hsl(var(--color-hue) 6% 20%);
	--color-line-primary: hsl(var(--color-hue) 4% 30%);
	--color-line-secondary: hsl(var(--color-hue) 4% 20%);
	--color-line-tertiary: hsl(var(--color-hue) 20% 40%);
	--header-bg: hsl(var(--color-hue) 8% 10% / 0.925);
	color-scheme: dark;
}

html {
	scrollbar-gutter: stable;
}

body, button, input, textarea {
	color: var(--color-text-primary);
	font-family: var(--font-text);
	font-size: var(--font-m);
	line-height: 1.5;
}

body {
	background-color: var(--color-bg-primary);
}

body.has-preview {
	--preview-height: 0px;
}

body.modal-open {
	overflow: hidden;
	pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: var(--spacing-7) 0 0;
	padding: 0 0 var(--spacing-2);
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: pretty;
}

h1 {
	margin: calc(var(--spacing-3) * -1) 0 var(--spacing-4);
	font-size: var(--font-xxl);
	line-height: 1.25;
}

h2 {
	margin-top: calc(var(--spacing-7) + var(--spacing-5));
	font-size: var(--font-xl);
}

h2 + h3 {
	margin-top: var(--spacing-6);
}

h3 {
	font-size: var(--font-l);
}

h4 {
	font-size: calc(var(--font-m) + 2px);
}

pre,
code,
kbd,
samp {
	font-family: var(--font-mono);
}

.header {
	height: var(--header-height);
	width: auto;
	max-width: none;
	padding: 0 var(--spacing-5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: var(--spacing-8);
	background: var(--header-bg);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-line-secondary);
	user-select: none;
}

.has-preview .header {
	top: var(--preview-height);
}

.header .left {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: var(--spacing-6);
}

.header .logo {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	font-weight: 500;

	& a {
		display: flex;
		align-items: center;
		gap: var(--spacing-3);
	}

	& img {
		height: var(--spacing-7);
	}

	& span {
		margin: 0;
		color: var(--color-accent-primary);
	}
}

.header .logo-only {
	display: none;
}

.header .logo-docs {
	padding: var(--spacing-2);
	color: var(--color-text-tertiary);

	&:hover {
		color: var(--color-text-primary);
	}
}


/* Search */

.search-container {
	width: 100%;

	&.header-search {
		width: auto;
		max-width: var(--spacing-11);
		flex: 1 1 auto;
	}

	&:focus-within .search-icon {
		color: var(--color-text-primary);
	}
}

.search {
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-line-primary);
	border-radius: var(--radius-m);
	transition: none;

	& input[type="submit"] {
		display: none;
	}

	&.search-home {
		width: 100%;
		padding: var(--spacing-4) var(--spacing-5);
	}
}

.search-icon-wrapper {
	width: var(--spacing-7);
	position: absolute;
	inset: 0 auto 1px 2px;
	display: grid;
	place-items: center;

	& .search-icon {
		--size: 17px;
		width: var(--size);
		height: var(--size);
		position: relative;
		top: 0;
		left: 0;
		color: var(--color-text-secondary);
		transform: none;
	}
}

.search-shortcut-wrapper {
	position: absolute;
	inset: 0 var(--spacing-5) 0 auto;
	z-index: 1;
	display: flex;
	align-items: center;
	color: var(--color-text-tertiary);
	font-size: var(--font-xxs);
	pointer-events: none;

	& kbd {
		font-family: inherit;
	}
}


.search-container .search input[type="search"] {
	height: var(--spacing-7);
	padding: 0 var(--spacing-1) var(--spacing-1) var(--spacing-7);
	background: none;
	color: var(--color-text-primary) !important;
	cursor: pointer;
	font-size: var(--font-s);

	&::placeholder {
		color: var(--color-text-secondary);
	}
}

.search .clear-button {
	display: none;
	--margin: 5px;
	--size: calc(var(--spacing-7) - (var(--margin) * 2));
	height: var(--size);
	width: var(--size);
	margin-right: var(--margin);
	margin-top: var(--margin);
	padding: 0;
	background: none;
	border-radius: var(--radius-round) !important;
	color: var(--color-text-secondary);
	outline: none !important;
	
	&:hover {
		background: var(--color-bg-tertiary-hover);
		color: var(--color-text-secondary);

		&:active {
			color: var(--color-text-primary);
		}
	}

	&:focus {
		box-shadow: none !important;
		/* Todo: Review accessibility */
	}
}

/* Theme toggle button styles */
.theme-toggle {
	background: none;
	border: none;
	cursor: pointer;

	& .icon {
		--size: 15px !important;
		margin-top: 0px !important;
	}
}

.theme-toggle .light-icon,
.dark-theme .theme-toggle .dark-icon {
	display: none;
}

.theme-toggle .dark-icon,
.dark-theme .theme-toggle .light-icon {
	display: inline-block;
}

/***** User nav *****/
.nav-wrapper-desktop {
	display: flex;
	align-items: stretch;
	gap: var(--spacing-5);
}

.nav-wrapper-desktop .user-nav {
	display: flex;
	gap: var(--spacing-3);
}

.nav-wrapper-desktop .user-nav-item {
	padding: 0 var(--spacing-4);
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-3) + var(--spacing-1));
	color: var(--color-text-secondary);
	font-size: calc(var(--font-s) - 1px);
	font-weight: 500;
	text-decoration: none !important;

	&:hover, 
	&:active,
	&.active {
		color: var(--color-text-primary);
	}

	&:focus {
		color: var(--color-text-secondary);
	}

	& .icon {
		--size: 14px;
		height: var(--size);
		width: var(--size);
		margin-top: 1px;
	}
}

.user-info > button {
	height: 100%;
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-3) + var(--spacing-1));
	color: var(--color-text-secondary) !important;
	font-size: var(--font-xs);
	font-weight: 500;

	&:hover span {
		color: var(--color-text-primary) !important;
	}
}


/* Dropdown */

.dropdown-menu {
	margin: 0;
	padding: var(--spacing-3);
	top: calc(var(--header-height) - var(--spacing-3));
	left: 50%;
	background: var(--color-bg-primary);
	border: 1px solid var(--color-line-primary);
	border-radius: var(--radius-m);
	transform: translateX(-50%);
}

.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
	margin-bottom: var(--spacing-1);
	padding: var(--spacing-4) var(--spacing-5);
	border-radius: var(--radius-s);
	color: var(--color-text-primary) !important;
	font-size: var(--font-xs);
	text-decoration: none;

	&:hover,
	&:focus {
		background: var(--color-bg-tertiary);
	}
}

.dropdown-menu [role=separator] {
	margin: var(--spacing-3) 0;
	border-color: var(--color-line-secondary);
}

.dropdown-toggle {
	&[aria-expanded=true] {
		color: var(--color-text-primary) !important;
	}

	& .user-info-name {
		display: flex;
		align-items: center;
		gap: calc(var(--spacing-2) - 1px);
	}
}

.dropdown-toggle [aria-expanded=true] {
	color: var(--color-text-primary);
}

/* Mobile nav containers */

.mobile-dialog {
	position: fixed;
	inset: var(--header-height) 0 0;
	z-index: 1000;
	width: 100dvw;
	height: calc(100dvh - var(--header-height));
	background: var(--color-bg-primary);
	display: none;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;

	&.open {
		display: flex;
		opacity: 1;
		visibility: visible;
	}

	& .main-nav {
		width: 100%;
		padding: var(--spacing-5);
		position: relative;
		top: 0 !important;
		flex-grow: 1;
		display: block;
	}

	& .tertiary-nav {
		width: 100%;
		padding: var(--spacing-5);
		position: relative;
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing-1) / 2);
		border-top: 1px solid var(--color-line-secondary);
	}

	& .mobile-nav-item {
		width: auto;
		background: none;
		border: none;
		justify-content: space-between;

		& .label {
			display: flex;
			align-items: center;
			gap: var(--spacing-4);
		}

		& .icon {
			--size: 18px;
			height: var(--size);
			width: var(--size);
		}
	}

	& .toggle-back {
		justify-content: flex-start;
		gap: var(--spacing-2);
	}
}

.dialog-search,
.dialog-user {
	padding: var(--spacing-5);
}

@media (max-width: 1024px) {
	.logo-text {
		display: none;
	}

	.header .logo-only {
		display: block;
	}
}

@media (max-width: 768px) {
	.nav-wrapper-desktop,
	.header-search {
		display: none !important;
	}

	.nav-wrapper-mobile {
		display: flex;
		gap: var(--spacing-3);
	}

	.nav-wrapper-mobile .menu-button-mobile {
		height: 100%;
		min-width: 0;
	}
}

.button-mobile {
	background: none;
	border: none;
}

.nav-wrapper-mobile .icon {
	color: var(--color-text-secondary);
}

.nav-wrapper-mobile.active {
	& .active .icon {
	color: var(--color-text-primary);
	}
}


/***** Main nav *****/

.main-nav {
	position: fixed;
	top: var(--header-height);
	bottom: 0;
	left: 0;
	z-index: 100;
	width: var(--sidebar-width);
	padding: var(--spacing-5) var(--spacing-5) var(--spacing-7);
	border-right: 1px solid var(--color-line-secondary);
	font-size: var(--font-xs);
	overflow-y: auto;
	user-select: none;
}

.has-preview .main-nav {
	top: calc(var(--header-height) + var(--preview-height));
}

.main-nav button {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
}

.main-nav a,
.main-nav button,
.button-item a,
.mobile-nav-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-3) var(--spacing-4);
	border-radius: var(--radius-m);
	color: var(--color-text-secondary);
	cursor: pointer;
	font-weight: 600;
	line-height: 1.214;
	text-decoration: none !important;

	&:hover {
		background-color: var(--color-bg-tertiary);
		
		&:active {
			color: var(--color-text-primary) !important;
		}
	}
	
	&:visited {
		color: var(--color-text-secondary);
	}

	&.active {
		background-color: var(--color-bg-tertiary);
		color: var(--color-text-primary) !important;
	}
}

.main-nav a {
	padding-left: var(--spacing-5);
}

.main-nav .category {
	margin-bottom: var(--spacing-4);

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

.main-nav .collapsible-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.main-nav .collapsible-toggle .icon {
	--size: 18px;
	height: var(--size);
	width: var(--size);
}

.collapsible-toggle .up,
.expanded .collapsible-toggle .down {
	display: none;
}

.expanded .collapsible-toggle .up {
	display: inline-block;
}

.main-nav .category-title,
.mobile-nav-item {
	padding: calc(var(--spacing-4) + var(--spacing-1)) var(--spacing-4);
	font-size: var(--font-s);
}

.main-nav .active .category-title {
	color: var(--color-text-primary);
}

.main-nav .section-group:last-child {
	margin-bottom: var(--spacing-3);
}


.main-nav .section-title {
	margin: var(--spacing-5) 0 var(--spacing-3) var(--spacing-5);
	color: var(--color-text-tertiary);
	font-size: var(--font-xxs);
	font-weight: 500;
	letter-spacing: 0.1ch;
	text-transform: uppercase;
}

.main-nav .single-section .section-title {
	display: none;
}

.main-nav .single-section .section-group {
	margin-top: var(--spacing-4);
}

.main-nav .article-item {
	margin-bottom: calc(var(--spacing-1) / 2);
	gap: calc(var(--spacing-4) + var(--spacing-1));
	text-wrap: balance;

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

.main-nav .article-icon {
	display: flex;

	& svg {
		height: var(--font-m);
		width: var(--font-m);
	}
}

.collapsible-group {
	height: auto;
	position: relative;
	top: calc(var(--spacing-2) * -1);
	opacity: 0;
	overflow: hidden;
	transition: all 0.2s ease-out;
	will-change: height, opacity, top;
}

.expanded .collapsible-group {
	top: 0;
	opacity: 1;
}

.category:not(.expanded) .collapsible-group {
	height: 0;
}


/***** Main content *****/

main {
	--article-gap: var(--spacing-8);
	margin-top: var(--header-height);
	margin-left: var(--sidebar-width);
}

.container {
	width: auto;
	max-width: 960px;
	margin: 0 auto;
	padding: var(--spacing-8) var(--article-gap) var(--spacing-9);
}

.container.article-page {
	max-width: none;
	padding-right: var(--spacing-6);
}

.container a {
	color: var(--color-text-primary);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--color-text-tertiary);
	text-underline-offset: 2px;

	&:visited {
		color: var(--color-text-primary);
	}

	&:hover {
		color: var(--color-text-secondary);

		&:active {
			opacity: 0.7;
		}
	}
}

.container button,
.container .button {
	height: auto;
	padding: calc(var(--spacing-3) + 1px) var(--spacing-6);
	background: var(--color-accent-primary);
	border: none;
	border-radius: var(--radius-m);
	color: white !important;
	font-size: var(--font-s);
	font-weight: 600;
	letter-spacing: 0.005ch;
	line-height: inherit;
	text-decoration: none;

	&:focus {
		background: var(--color-accent-primary);
	}

	&:hover {
		background: var(--color-accent-primary-hover);

		&:active {
			background: var(--color-accent-primary-active);
		}
	}

	&.button-secondary {
		background: var(--color-bg-tertiary);
		color: var(--color-text-primary) !important;
		border: 1px solid var(--color-line-primary);
		
		&:hover {
			background: var(--color-bg-tertiary-hover);
			
			&:active {
				background: var(--color-bg-tertiary-active);
			}
		}
		
		&[aria-pressed="true"] {
			background: var(--color-line-tertiary);
			border-color: var(--color-line-tertiary);
		}
	}
}

/***** Article *****/

.article-container {
	gap: var(--article-gap);
	display: flex;
	align-items: flex-start;
}

.article-wrapper {
	flex: 1 1 auto;
}

.article {
	max-width: 640px;
	min-width: 0;
	margin: 0 auto;
	padding: 0;
}

.article-header {
	margin: 0;
}

.article-author,
.article-subscribe {
	display: none;	
}

.article-content {
	margin: 0;
	padding: 0;
	line-height: 1.62;
}

.article-content ol,
.article-content ul {
	margin: 1em 0 1em var(--spacing-6);
	padding-left: var(--spacing-5);
}


.article-content li {
	margin-top: var(--spacing-3);
	padding-left: var(--spacing-2);

	&:first-child {
		margin-top: 0;
	}

	&::marker {
		color: var(--color-accent-primary);
		font-weight: 700;
	}	
}

.article-content img,
.article-content iframe,
.article-content video {
	max-width: 100%;
	border-radius: var(--radius-m);
	vertical-align: top;
}

.article-content iframe {
	margin: 1em 0;
}

.article-content pre {
	padding: var(--spacing-4);
	border: 1px solid var(--color-line-primary);
	background: var(--color-bg-tertiary);
	border-radius: var(--radius-s);
	font-size: var(--font-s);
}

.article-body {
	min-height: var(--spacing-10);
}

.article-body :not(pre) > code {
	margin: 0 var(--spacing-1);
	padding: var(--spacing-2) var(--spacing-3);
	background: oklch(from var(--color-line-secondary) calc(l * 1.06) c h);
	border: 1px solid oklch(from var(--color-line-secondary) calc(l * 0.9) c h);
	border-radius: var(--radius-s);
	font-size: var(--font-s);
}

.note {
	padding: var(--spacing-5) calc(var(--spacing-5) + var(--spacing-3));
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-line-secondary);
	border-radius: var(--radius-m);
	font-size: var(--font-s);

	& p:first-child {
		margin-top: 0;
	}

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

.article-return-to-top {
	display: none;
}

/***** Feedback *****/

.article-votes {
	padding: 0;
	border: none;
	text-align: left;
}

.article-votes-controls-row,
.article-votes-controls {
	display: flex;
	align-items: center;
	gap: var(--spacing-5);
}

.article-votes-controls {
	gap: var(--spacing-4);
}

button.article-vote {
	min-width: var(--spacing-9);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-4);
	font-size: var(--font-s);
	font-weight: 500;

	& .icon {
		--size: 16px;
		height: var(--size);
		width: var(--size);
	}

	&.article-vote-down {
		margin-left: -3px;

		& .icon {
			margin-top: 2px;
		}
	}

	&.article-vote-up .icon {
		margin-bottom: 2px;
	}	
}


.article-votes-count {
	color: var(--color-text-secondary);
	font-size: var(--font-xs);
	line-height: 1.3;
}

.article-votes a { 
	--padding: var(--spacing-2);
	margin: calc(var(--padding) * -1);
	padding: var(--padding);
	color: var(--color-text-secondary) !important;
	font-weight: 400;
	text-decoration: none !important;

	&:hover {
		color: var(--color-text-primary) !important;
	}
}


/* Related articles */

.article-relatives {
	padding: 0;
	border: none;
	font-size: var(--font-s);
}

.article-votes h2,
.article-relatives h2 {
	margin: calc(var(--spacing-8) + var(--spacing-5)) 0 0;
	padding: 0 0 var(--spacing-5);
	font-size: var(--font-m);
	font-weight: 600;
}

.related-articles li {
	margin-bottom: var(--spacing-4);

	& a {
		margin-left: calc(var(--spacing-2) * -1);
		padding: var(--spacing-2);
	}
}

/* Return to top */

.article-return-to-top {
	border-top: none;
}

/***** Navigation *****/

.article-nav {
	margin: calc(var(--spacing-8) - var(--spacing-5)) 0 0;
	display: flex;
	gap: var(--spacing-5);
}

.article-nav-item {
	padding: calc(var(--spacing-4) + var(--spacing-1)) var(--spacing-5);
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
	opacity: 1 !important;
	border: 1px solid var(--color-line-primary);
	border-radius: var(--radius-m);
	text-decoration: none !important;

	&.next {
		align-items: flex-end;
	}

	&:hover {
		background: var(--color-bg-tertiary);
		color: var(--color-text-primary) !important;
		
		&:active {
			opacity: 0.7 !important;
		}
	}
}

.article-nav-item-label {
	margin-top: calc(-1 * var(--spacing-1));
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
	color: var(--color-text-tertiary);
	font-size: var(--font-xxs);

	& .icon {
		--size: 15px;
		height: var(--size);
		width: var(--size);
		padding-top: 1px;
		box-sizing: content-box;
	}
}

.next .article-nav-item-label {
	margin-right: calc(var(--spacing-2) * -1);
}

.previous .article-nav-item-label {
	margin-left: calc(var(--spacing-2) * -1);
}


.article-nav-item-title {
	font-size: var(--font-s);
	line-height: 1.25;
	text-wrap: balance;
}

.next .article-nav-item-title {
	text-align: right;
}

.article-nav-item[style*="display: none"] {
	display: block !important;
	visibility: hidden;
	pointer-events: none;
}

.article-footer-nav {
	margin: var(--spacing-7) 0 calc(var(--spacing-6) * -1);
	color: var(--color-text-secondary);
	font-size: var(--font-xxs);
	line-height: 1.8;

	& a {
		padding: var(--spacing-1);
	}
}

/* Sidebar */

.article-sidebar {
	max-width: var(--spacing-11);
	margin-bottom: 0;
	flex: 0 1 30%;
	position: sticky;
	top: calc(var(--preview-height) + var(--header-height) + var(--spacing-8) + var(--spacing-4));
	max-height: calc(100vh - var(--header-height) - var(--spacing-5));
	border: 0;
	font-size: var(--font-s);
}

.sidenav-title {
	margin-bottom: var(--spacing-5);
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	cursor: pointer;
	font-size: inherit;
}

.sidenav-title .icon {
	height: 16px;
	width: 16px;
}

.on-this-page {
  display: none;
  position: relative;
  overflow: visible; /* Ensure the indicator is visible */
}

.on-this-page ul {
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;

	&:before {
		width: 2px;
		position: absolute;
		z-index: -1;
		inset: 0 auto 0 0;
		display: block;
		opacity: 0.62;
		background: var(--color-line-secondary);
		border-radius: var(--radius-round);
		content: '';
	}
}

.on-this-page li {
  margin: 0;
  padding: 0;
}

.article-page .on-this-page li a {
  margin-left: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-3);
  display: block;
  opacity: 1;
  color: var(--color-text-secondary);
  font-size: var(--font-s);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  text-wrap: pretty;
  transition: color 0.25s ease;
  word-wrap: break-word;

  &:hover {
    color: var(--color-text-primary);

	 &:active {
		opacity: 1;
		color: var(--color-text-secondary);
	 }
  }

	&.active {
		padding-right: 0;
		color: var(--color-text-primary);
		font-weight: 600; 
	}
}

.on-this-page li.h3 a {
  padding-left: calc(var(--spacing-3) + var(--spacing-4));
  font-size: calc(var(--font-s) - 1px);
}

.active-section-indicator {
  width: 2px;
  position: absolute;
  left: 0;
  z-index: 1;
  background-color: var(--color-accent-primary);
  border-radius: var(--radius-round);
  transform: translateY(0) translateZ(0);
  transition: height 0.25s ease, transform 0.25s ease;
  will-change: height, transform;
}


/********* Overrides *********/

.article-comments,
.article-footer,
.article-more-questions,
.article-content .article-votes,
.article-attachments,
.recent-articles,
.footer,
.hero,
.community,
.activity,
.sub-nav,
.section-subscribe,
.content-tags,
.article-relatives {
	display: none !important;
}

#preview-bar-container {
	position: absolute;
	top: 0;

	& > div {
		box-shadow: none;
	}
}


/* Other resets */

.category-content,
.section-content {
	flex: 1 1 auto;
}

b, strong {
	font-weight: 700;
}

/***** Category and Section pages *****/

.page-header h1 {
	margin-bottom: var(--spacing-7);
}

.section-tree {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-7);
}

.section-tree .section {
	margin-bottom: 0;
}

.section-tree-title {
	margin: 0 0 var(--spacing-5);
	font-size: var(--font-xl);
}

.section-tree .see-all-articles {
	padding: var(--spacing-4) var(--spacing-5);
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
	font-size: var(--font-s);
	font-weight: 800;

	&:hover {
		color: var(--color-text-primary);
	}

	& .icon {
		--size: 18px;
		height: var(--size);
		width: var(--size);
		margin-top: 2px;
	}
}

.button-item {
	padding: 0;
	display: flex;
	align-items: flex-start;
	font-size: inherit;

	& a,
	& a:visited {
		width: 100%;
		background: var(--color-bg-tertiary);
		color: var(--color-text-primary);
		padding: calc(var(--spacing-5) - var(--spacing-1)) calc(var(--spacing-5) + var(--spacing-1));
		text-wrap: pretty;

		&:hover {
			color: var(--color-text-primary);
			background: var(--color-bg-tertiary-hover);
		}
	}
}


/***** Pagination *****/

.pagination {
	margin: 0;
}

.pagination-list {
	margin: var(--spacing-7) 0 0;
}

.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link {
	padding: 0 var(--spacing-5);
	font-size: var(--font-s);
	text-decoration: none !important;

	&:hover,
	&:focus {
		color: white !important;
	}
}

.pagination-prev-text {
	margin-left: var(--spacing-3);
}

.pagination-next-text {
	margin-right: var(--spacing-3);
}

@media (max-width: 1200px) {
	:root {
		--sidebar-width: var(--spacing-11);
	}
}

@media (max-width: 1024px) {
	.header .left {
		gap: var(--spacing-5);
	}

	.container,
	.container.article-page {
		padding: calc(var(--spacing-7) + var(--spacing-4)) var(--spacing-7) var(--spacing-9);
	}

	.article-sidebar {
		display: none;
	}
}

@media (min-width: 769px) {
	.nav-wrapper-mobile {
		display: none;
	}
}

@media (max-width: 768px) {
	:root {
		--sidebar-width: 0px;
	}

	.main-nav {
		display: none;
	}

	.container {
		padding: var(--spacing-6) !important;
	}

	.article-wrapper {
		width: 100%;
	}

	.article-votes-controls-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.article-footer-nav {
		margin-bottom: 0;
	}
}

/* Misc. other pages */

.collapsible-nav-border,
.table tr {
	border-color: var(--color-line-secondary);
}

.collapsible-nav-list {
	gap: var(--spacing-6);
}

.collapsible-nav-list li {
	margin: 0;
	border-bottom: none !important;
}

.collapsible-nav-list li a {
	padding: var(--spacing-5) 0 !important;
	color: var(--color-text-tertiary) !important; /* Override :visited */
}

.collapsible-nav-list li:hover a {
	box-shadow: inset 0 calc(var(--spacing-1) * -1) 0 var(--color-text-tertiary);
	color: var(--color-text-secondary) !important;
}

.collapsible-nav-list li.current a {
	box-shadow: inset 0 calc(var(--spacing-1) * -1) 0 var(--color-accent-primary);
	color: var(--color-text-primary) !important;
}

@media (max-width: 768px) {
	.collapsible-nav-toggle {
		margin: var(--spacing-3) 0;
		width: auto;
		position: relative;
		top: 0;
		display: flex;
		align-items: flex-end;
		border: none !important;
		gap: var(--spacing-3);
		transform: none;
	}

	.collapsible-nav-list {
		gap: 0;
	}

	.collapsible-nav-list li a {
		padding: var(--spacing-2) 0 !important;
	}
}

/* *** */

.profile-section {
	width: 100%;
}

.article-list-item {
	margin-bottom: var(--spacing-3);
}

.breadcrumbs li a {
	color: var(--color-text-secondary);
	text-decoration: none;

	&:visited {
		color: var(--color-text-secondary);
	}
}

zd-autocomplete {
	min-width: var(--spacing-12);
	padding: var(--spacing-4);
	border-radius: var(--radius-m);
}

zd-autocomplete-header {
	display: none;
}

zd-autocomplete-multibrand {
	padding: calc(var(--spacing-4) + var(--spacing-1));
	border: none;
	border-radius: var(--radius-s);

	&:hover {
		background-color: var(--color-bg-tertiary);
	}
}

zd-autocomplete-multibrand zd-autocomplete-title-multibrand {
	color: var(--color-text-primary);
	font-size: var(--font-s);
}

zd-autocomplete-multibrand zd-autocomplete-breadcrumbs-multibrand {
	padding-top: var(--spacing-1);
	color: var(--color-text-secondary);
	font-size: var(--font-xxs);
}

.my-activities-nav {
	margin-bottom: var(--spacing-6);
	background: none;
}

.meta-group {
	display: flex;
	color: var(--color-text-tertiary);
	line-height: 1;
}

/* Search Modal Styles */
.search-modal {
	padding: 15vh var(--spacing-6) var(--spacing-6);
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	opacity: 0;
	pointer-events: all;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	visibility: hidden;

	&.open {
		opacity: 1;
		visibility: visible;
	}
}

.search-modal-backdrop {
	position: absolute;
	inset: 0;
	background: oklch(from var(--color-accent-primary) 0.89 0.005 h / 0.75);
	backdrop-filter: blur(2px);
}

.search-modal-content {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 70vh;
	background: var(--color-bg-primary);
	border-radius: var(--radius-l);
	box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
	overflow: hidden;
	transform: scale(0.95);
	transition: transform 0.2s ease;
}

.search-modal.open .search-modal-content {
	transform: scale(1);
}

.search-modal-header {
	--search-input-icon-size: 20px;
	display: flex;
	align-items: center;
	gap: var(--spacing-5);
}

.search-modal-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-modal-input-wrapper .search-icon {
	margin-top: -1px;
	position: absolute;
	left: calc(var(--spacing-6) - 1px);
	z-index: 2;
	width: var(--search-input-icon-size);
	height: var(--search-input-icon-size);
	color: var(--color-text-secondary);
}

.search-modal-input {
	width: 100%;
	border: none !important;
	background: none !important;
	outline: none !important;
}

.search-modal-input input[type="search"] {
	width: 100%;
	height: var(--spacing-8) !important;
	padding: 0 0 var(--spacing-1) calc(var(--spacing-6) + var(--search-input-icon-size) + var(--spacing-5) - 1px) !important;
	border: none !important;
	background: none !important;
	color: var(--color-text-primary) !important;
	font-size: var(--font-l) !important;
	outline: none !important;

	&::placeholder {
		color: var(--color-text-tertiary) !important;
	}
}

.search-modal-close {
	margin-top: -1px;
	margin-right: calc(var(--spacing-4) + 2px);
	padding: var(--spacing-4);
	display: flex;
	background: none;
	border: none;
	border-radius: var(--radius-s);
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: all 0.1s ease;

	&:hover {
		color: var(--color-text-primary);
	}
	
	& .icon {
		width: var(--search-input-icon-size);
		height: var(--search-input-icon-size);
	}
}

.search-modal-body {
	display: flex;
	flex-direction: column;
}

.search-modal-shortcuts {
	display: flex;
	gap: var(--spacing-5);
	flex-wrap: wrap;
	justify-content: center;
}

.shortcut-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	color: var(--color-text-tertiary);
	font-size: var(--font-xs);
}

.shortcut-item kbd {
	padding: var(--spacing-1) var(--spacing-2);
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-line-secondary);
	border-radius: var(--radius-xs);
	font-family: var(--font-mono);
	font-size: var(--font-xxs);
	line-height: 1;
}

/* Search Suggestions */
.search-modal-suggestions {
	padding: 0;
	max-height: calc(70vh - var(--spacing-8));
	border-top: 1px solid var(--color-line-secondary);
	display: flex;
	flex-direction: column;
}

.search-suggestions-list {
	padding: var(--spacing-4);
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.search-suggestion {
	margin-bottom: var(--spacing-1);
	padding: calc(var(--spacing-4) + var(--spacing-1));
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-4);
	border-radius: var(--radius-m);
	cursor: pointer;
	transition: background-color 0.025s ease;
	scroll-margin: 11px;
}

.search-suggestion.focused {
	background: var(--color-bg-tertiary);
}

.search-suggestion:last-child {
	border-bottom: none;
}

.suggestion-icon {
	margin-top: 3px;
	flex-shrink: 0;
	display: flex;

	& .icon {
		--size: 16px;
		width: var(--size);
		height: var(--size);
		color: var(--color-text-tertiary);
	}
}

.suggestion-content {
	flex: 1;
	min-width: 0;
}

.suggestion-title {
	margin: 0;
	padding: 0;
	color: var(--color-text-primary);
	font-weight: 500;
	line-height: 1.3;
}

.suggestion-snippet {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--font-s);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.search-suggestions-footer {
	padding: var(--spacing-4) calc(var(--spacing-4) + var(--spacing-4) + var(--spacing-1));
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	background: var(--color-bg-primary);
	border-top: 1px solid var(--color-line-secondary);
	color: var(--color-text-secondary);
	font-size: var(--font-xxs);
	user-select: none;
	
	& .icon {
		width: 14px;
		height: 14px;
		stroke-width: 1.5;
	}
}

.search-modal-no-results {
	padding: var(--spacing-6);
	border-top: 1px solid var(--color-line-secondary);	
	text-align: center;
}

.search-modal-no-results .no-results-message {
	color: var(--color-text-tertiary);
	font-weight: 500;
	line-height: 1.4;
}

.search-modal-no-results .search-query {
	color: var(--color-text-primary);
	font-weight: 600;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.search-modal {
		padding: var(--spacing-6) var(--spacing-4);
		align-items: flex-start;
	}

	.search-modal-content {
		max-height: 80vh;
	}

	.search-modal-empty {
		padding: var(--spacing-6) var(--spacing-5);
	}

	.search-shortcuts {
		flex-direction: column;
		gap: var(--spacing-3);
	}
}