:root {
	--ss-border: #bbb;
	--page-width: calc(100vw - var(--scrollbar-width));
	--color: #111;
	--hover-bg: #ccc;
	--selection: black;
	--a: #1f74c1;
	--asoft: #c3dff9;
	--bg: #fff;
}

.dark {
	--color: #d4d4d4;
	--ss-bg: #333;
	--hover-bg: #161616;
	--bg: #1e1e1e;
	--ss-border: #3d3d3d;
	--asoft: #1f74c1bf;
}

html {
	color: var(--color);
	background: var(--bg);
}


body > header h1 a {
	color: var(--color);
}
svg {
	fill: var(--color);
}

a {
	color: var(--a);
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

#full-menu nav a,
#mini-menu nav li a,
#full-menu form select,
#mini-menu form select {
	color: var(--color);
}

#mini-menu nav li a:hover {
	background: var(--hover-bg);
}

::selection {
	color: var(--selection);
}

bread-crumbs::part(nav) {
	color: var(--color);
}
bread-crumbs::part(a) {
	color: var(--a);
}

#toggletheme {
	cursor: default;
	height: 20px;
	svg {
		height: 38px;
		width: 38px;
		position: relative;
		top: -10px;
	}
}
#mini-menu #toggletheme {
	height: 30px;
}
#full-menu #toggletheme {
	margin-left: 7px;
}
#mini-menu #toggletheme {
	border-top: 1px solid #00000017;
	border-bottom: 1px solid #00000017;
	display: block;
	font-weight: bold;
	padding: 4px 12px;
	cursor: default;
}

.ssaddr {
	margin-top: -3px;
	line-height: 150%;
}

#sub-menu {
	border-top: unset;
	--left: -12px;

	ul {
		margin: 1px;
		padding-block: 15px 6px;
		min-width: 180px;

		li {
			padding-inline: 15px;
			line-height: 180%;

			span {
				cursor: default;
			}

			a {
				text-decoration: none;
				color: var(--color);
			}

			&:hover {
				background: var(--asoft);
			}
		}
	}
}

body > header {
	border-bottom: 1px solid var(--ss-border);
	h1 a {
		span {
			span {
				color: var(--a);
				font-weight: bold;
			}
		}
		&:hover {
			text-decoration: unset;
		}
	}
}

#mini-menu {
	background: var(--bg);
	.mini h1 {
		font-weight: normal;
		span {
			color: var(--a);
			font-weight: bold;
		}
	}
}

#bar-menu button:hover, #mini-menu .toggle-menu:hover {
	background: var(--a);
}

#mini-menu nav {
	li > span {
		border-top: 1px solid #00000017;
		border-bottom: 1px solid #00000017;
		display: block;
		font-weight: bold;
		padding: 4px 12px;
	}
}

#bread-crumbs {
	padding: 0;
}


/* --- Layout --- */

#ssrows {
	--padding-inline: 20px;
	--content-max-width: var(--pageWidth);
	--breakout-max-width: calc(var(--pageWidth) + 100px);

	--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

	display: grid;
	grid-template-columns:
		[page-start] minmax(var(--padding-inline), 1fr)
		[breakout-start] minmax(0, var(--breakout-size))
		[content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end]
		minmax(0, var(--breakout-size)) [breakout-end]
		minmax(var(--padding-inline), 1fr) [page-end];

	> :not(.breakout, .page) {
		grid-column: content;
	}

	> .breakout {
		grid-column: breakout;
	}

	> .page {
		grid-column: page;
		display: grid;
		grid-template-columns: inherit;

		> :not(.breakout, .page) {
			grid-column: content;
		}
	}

	> .fill {
		display: block;
	}

	[data-span] {
		grid-row: var(--rows);
	}
}


:is(.ssrow-3-1, .ssrow-1-3, .ssrow-1-2-1) > div {
	@container (max-width: 840px) {
		grid-template-columns: 1fr;
	}
}
.ssrow-2-1-1 > div {
	.sscol:first-child {
		grid-column: span 2;
	}
	@container (max-width: 1240px) {
		grid-template-columns: 1fr 1fr;
	}
}
.ssrow-1-1-2 > div {
	.sscol:last-child {
		grid-column: span 2;
	}
	@container (max-width: 1340px) {
		grid-template-columns: 1fr 1fr;
	}
}
.ssrow-1-1-1-1 > div {
	@container (max-width: 1340px) {
		grid-template-columns: 1fr 1fr;
	}
}

:is(.ssrow-2-1, .ssrow-1-2, .ssrow-1-1-1) > div {
	@container (max-width: 748px) {
		grid-template-columns: 1fr 1fr;
	}
}
:is(.ssrow-3-2, .ssrow-2-3) > div {
	@container (max-width: 600px) {
		grid-template-columns: 1fr;
	}
}
.ssrow-3-1 > div {
	grid-template-columns: 3fr max(1fr, 240px);
}
.ssrow {
	padding-block: 20px;
	width: 100%;
	container-type: inline-size;
	&:first-child h1 {
		margin-top: 0;
	}
	> div {
		gap: 14px;

		@container (max-width: 570px) {
			grid-template-columns: 1fr;
		}
	}
}

.sscol {
	gap: 14px;
}

.ssnone {
	display: none;
}


/* --- Account --- */

.ssrow:has(.ssfrag-signin), .ssrow:has(.ssfrag-account) {
	height: 100%;
}
.ssfrag-signin, .ssfrag-account {
	display: grid;
}
:is(.ssfrag-signin, .ssfrag-account) > div {
	display: grid;
	width: 400px;
	max-width: calc(100vw - 40px);
	margin: auto;
	background-color: var(--ss-bg);
	padding: 20px 15px;
	border: 1px solid var(--ss-border);
	height: auto;
	border-radius: 4px;
}

:is(.ssfrag-signin, .ssfrag-account) svg {
	width: 20px;
	height: 20px;
	fill: var(--a);
	align-self: center;
	position: absolute;
	top: 4px;
	left: 4px;
}
:is(.ssfrag-signin, .ssfrag-account) label:has(input[type="text"], input[type="email"], input[type="password"]) span {
	display: none;
}
:is(.ssfrag-signin, .ssfrag-account) label:has(input[type="text"], input[type="email"], input[type="password"]) {
	position: relative;
	height: 32px;
	display: block;
	margin-bottom: 6px;
	width: 100%;
}
:is(.ssfrag-signin, .ssfrag-account) :is(input[type="text"], input[type="email"], input[type="password"]) {
	height: 100%;
	width: 100%;
	padding: 0 0 0 30px;
	border: 0;
	border-bottom: 1px solid var(--ss-border);
}
:is(.ssfrag-signin, .ssfrag-account) :is(input[type="text"], input[type="email"], input[type="password"]):focus {
	border-bottom: 1px solid #000;
}
:is(.ssfrag-signin, .ssfrag-account) button {
	border: 1px solid var(--ss-border);
	width: 100%;
	height: 32px;
}
:is(.ssfrag-signin, .ssfrag-account) .links {
	margin-top: 10px;
	display: grid;
    grid-template-columns: 1fr auto;
}
:is(.ssfrag-signin, .ssfrag-account) p:not(:last-child) {
	padding-bottom: 10px;
}


/* --- Search --- */

#searchaside {
	margin-top: 10px;
	h3 {
		margin-top: 10px;
		margin-bottom: 6px;
	}
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		li {
			margin: 0;
			line-height: 180%;
			a {
				display: inline-block;
				width: 100%;
				padding-left: 6px;
				color: var(--color);
				text-decoration: none;
				&:hover {
					background-color: var(--hover-bg);
				}
			}
			.count {
				color: #888;
				font-size: 13px;
			}
			.check {
				border: 1px solid #999;
				width: 16px;
				height: 16px;
				display: inline-block;
				border-radius: 3px;
				margin-right: 6px;
				position: relative;
				margin-bottom: -2px;
			}
			&.selected .check:before {
				content: '✓';
				font-size: 26px;
				position: absolute;
				top: -9px;
				left: -1px;
			}
		}
	}
}
.ssfrag-search .results {
	display: grid;
	grid-template-columns: 220px auto;
	gap: 20px;
	> div {
		container-type: inline-size;
	}
	&:not(.filter) {
		grid-template-columns: 1fr;
		aside {
			display: none;
		}
	}
	.head {
		display: grid;
		grid-template-columns: 1fr auto;
		margin: 20px 0;

		> span:first-child {
			color: #777;
		}

		> span:last-child {
			> span {
				font-weight: bold;
			}
			a {
				color: #777;
				text-decoration: none;

				&:hover {
					color: var(--a);
					text-decoration: underline;
				}
			}
		}
	}
	.result {
		clear: both;
		margin-bottom: 20px;
		padding-bottom: 10px;
		a {
			text-decoration: none;
			color: var(--a);
			&:visited {
				color: var(--avisited, var(--a));
			}
			&:hover h3 {
				text-decoration: underline;
			}
		}
		h3 {
			font-size: 20px;
			font-weight: normal;
		}
		.articleimg {
			float: left;
			margin: 0 16px 6px 0;
			border: 1px solid var(--ss-border);
			border-radius: 4px;
			img {
				width: min(30cqw, 180px);
				aspect-ratio: 16 / 10;
				object-fit: cover;
				border-radius: 4px;
			}
			@container (max-width: 400px) {
				float: unset;
				margin-right: 0;
				img {
					width: 100%;
					aspect-ratio: 32 / 9;
				}
			}
		}
		em {
			font-style: normal;
			font-weight: bold;
		}
	}
	.more {
		display: grid;
		justify-content: center;
		padding: 20px 0 30px 0;
		div {
			display: grid;
			width: 240px;
			height: 36px;
			background: var(--asoft);
			justify-content: center;
			align-content: center;
			border-radius: 4px;
			border: 1px solid var(--ss-border);
			cursor: pointer;
		}
	}
}

.ssfrag-search .showfilters {
	border: 1px solid var(--ss-border);
	text-align: center;
	padding: 6px;
	background: var(--asoft);
	border-radius: 4px;
	display: none;
	cursor: pointer;
}

.ssfrag-search form {
	display: grid;
	grid-template-columns: 1fr auto;
	font-size: 20px;
	margin: 10px 0;
	input {
		border: 1px solid var(--ss-border);
		color: var(--color);
		font-size: inherit;
		padding: 6px 10px;
		border-radius: 4px 0 0 4px;
		min-width: 80px;
		background: var(--bg);
	}
	button {
		font-size: inherit;
		border: 1px solid var(--ss-border);
		border-left: 0;
		padding: 0 15px;
		background: var(--asoft);
		border-radius: 0 4px 4px 0;
		svg {
			height: 16px;
			width: 16px;
		}
	}
}

#mini-menu #searchaside {
	h3 {
		padding: 0 10px;
	}
	li a {
		padding: 0 10px 0 16px;
	}
}

@container (max-width: 700px) {
	.ssfrag-search .results {
		grid-template-columns: 1fr;
	}
	.ssfrag-search .results > aside {
		display: none;
	}
	.ssfrag-search .showfilters {
		display: block;
	}
}