*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--pad:         48px;
	--bg:          #f5f5f3;
	--white:       #ffffff;
	--dark:        #111111;
	--mid:         #555555;
	--dim:         #888888;
	--border:      #dddddd;
	--red:         #E03030;
	--c-doi:       #1a7a4a;
	--c-abstract:  #24292f;
	--c-preprint:  #1a6496;
	--c-video:     #cc0000;
	--c-code:      #24292f;
	--c-slides:    #c7691e;
	--c-images:    #9e6b90;
	--c-data:      #6b6b9e;
	--c-related:   #7a4a1a;
}

html, body {
	background: var(--bg);
	color: var(--dark);
	font-family: 'DM Sans', sans-serif;
	min-height: 100vh;
}

body {
	display: flex;
	flex-direction: column;
}

main {
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 15px;
	flex: 1;
}

/* ── Welcome Screen ── */
body.idle {
	header {
		position: static;
		background: none;
		border: none;

		.main {
			flex-direction: column;
			height: auto;
			align-items: center;
			justify-content: center;
			padding: 80px var(--pad) 0;
			gap: 4px;
		}

		.logo {
			font-size: clamp(64px, 14vw, 112px);
			letter-spacing: 4px;
			line-height: 0.95;
		}

		.tagline {
			display: block;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 4px;
			text-transform: uppercase;
			color: var(--mid);
			margin-bottom: 40px;
		}

		.searchbox {
			margin: 0;
			max-width: 560px;
			width: 100%;

			input {
				background: var(--white);
				border-color: var(--dark);
				font-size: 15px;
				padding: 10px 16px;
			}
		}
	}

	nav, .filters, .spinner { display: none; }
}

/* ── Elements ── */
.tagline { display: none; }
.tag {
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 2px 8px;
	border-radius: 20px;
	border: 1px solid var(--border);
	color: var(--mid);
	white-space: nowrap;

	&.venue, &.section {
		cursor: pointer;
	}

	&.venue {
		background: rgb(17, 17, 17);
		border-color: rgb(17, 17, 17);
		color: var(--white);

		&:hover { background: #333; border-color: #333; }
	}

	&.section {
		background: #faeae8;
		border-color: var(--red);
		color: var(--red);

		&:hover { background: #f5d8d5; }
	}

	.grouped & {
		display: none;
	}
}

.spinner {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	opacity: 0;
	transition: opacity 0.15s;
	&.active { opacity: 1; }

	svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		animation: spin 0.8s linear infinite;
	}

	span {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--dim);
	}
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Header ── */
header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--white);
	border-bottom: 1.5px solid var(--dark);
	display: flex;
	flex-direction: column;

	.main {
		display: flex;
		align-items: center;
		gap: 18px;
		padding: 0 var(--pad);
		height: 68px;
		flex-shrink: 0;
	}

	.logo {
		font-family: 'Bebas Neue', sans-serif;
		font-size: clamp(18px, 3vw, 30px);
		letter-spacing: 3px;
		color: var(--dark);
		white-space: nowrap;
		flex-shrink: 0;
		line-height: 1;

		span { color: var(--red); }
	}

	.searchbox {
		flex: 1;
		max-width: 520px;
		margin-left: auto;

		input {
			width: 100%;
			background: var(--bg);
			border: 1.5px solid var(--border);
			border-radius: 2px;
			color: var(--dark);
			font-family: 'DM Mono', monospace;
			font-size: 14px;
			padding: 9px 14px;
			outline: none;
			transition: border-color 0.12s;

			&::placeholder { color: var(--dim); }
			&:focus { border-color: var(--dark); }
		}
	}

	.filters {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		border-top: 0 solid var(--border);
		transition: max-height 0.25s ease, opacity 0.2s ease, border-top-width 0.25s;

		&.open {
			max-height: 160px;
			border-top-width: 1px;
			opacity: 1;
		}

		.inner {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 10px var(--pad);
			flex-wrap: wrap;
		}

		.separator {
			color: var(--border);
			font-size: 18px;
			line-height: 1;
			user-select: none;
		}

		select {
			background: var(--bg);
			border: 1.5px solid var(--border);
			border-radius: 2px;
			color: var(--mid);
			font-family: 'DM Mono', monospace;
			font-size: 11px;
			padding: 4px 10px;
			outline: none;
			cursor: pointer;
			transition: border-color 0.12s, color 0.12s;

			&:focus { border-color: var(--dark); }
			option { background: var(--white); }
		}

		@media (max-width: 1075px) {
			.separator { display: none; }
		}
	}

	.chips {
		display: flex;
		gap: 4px;
		flex-wrap: wrap;

		button {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			padding: 4px 9px;
			border-radius: 2px;
			border: 1.5px solid var(--border);
			background: var(--bg);
			color: var(--mid);
			font-family: 'DM Sans', sans-serif;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			cursor: pointer;
			transition: background 0.1s, color 0.1s, border-color 0.1s;
			user-select: none;

			svg { width: 11px; height: 11px; fill: currentColor; }
			&:hover { border-color: var(--dark); color: var(--dark); }

			&[data-type="preprint"].active { background: var(--c-preprint); border-color: var(--c-preprint); color: var(--white); }
			&[data-type="code"].active     { background: var(--c-code);     border-color: var(--c-code);     color: var(--white); }
			&[data-type="video"].active    { background: var(--c-video);    border-color: var(--c-video);    color: var(--white); }
			&[data-type="slides"].active   { background: var(--c-slides);   border-color: var(--c-slides);   color: var(--white); }
			&[data-type="data"].active     { background: var(--c-data);     border-color: var(--c-data);     color: var(--white); }
		}
	}
}

nav {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;

	.view-toggle {
		display: flex;
		border: 1.5px solid var(--dark);
		border-radius: 2px;
		overflow: hidden;

		button {
			background: var(--white);
			border: none;
			border-right: 1px solid var(--dark);
			color: var(--mid);
			cursor: pointer;
			width: 36px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.1s, color 0.1s;

			&:last-child { border-right: none; }
			&.active { background: var(--dark); color: var(--white); }
			&:hover:not(.active) { background: var(--bg); }

			svg { width: 16px; height: 16px; fill: currentColor; }
		}
	}

	.more-btn {
		background: var(--white);
		border: 1.5px solid var(--dark);
		border-radius: 2px;
		color: var(--mid);
		font-family: 'DM Sans', sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 0 13px;
		height: 36px;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 5px;
		transition: background 0.1s, color 0.1s;
		white-space: nowrap;

		&:hover { background: var(--bg); }
		&.open { background: var(--dark); color: var(--white); }

		svg {
			width: 13px;
			height: 13px;
			fill: currentColor;
			transition: transform 0.2s;
		}

		&.open svg { transform: rotate(180deg); }
	}
}

/* ── Papers ── */
article {
	padding: 14px var(--pad);
	border: 1px solid var(--border);
	background: var(--white);
	transition: background 0.1s;
	animation: fadeIn 0.12s ease both;
	display: flex;
	gap: 20px;
	align-items: center;

	&:hover { background: #fafaf8; }
	&:not(:nth-last-child(1 of article)) { border-bottom: none; }
	&:nth-last-child(1 of article) { margin-bottom: 10px; }

	.body {
		flex: 1;
		min-width: 0;
	}

	.title {
		font-family: 'Lora', serif;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.5;
		margin-bottom: 3px;
		color: var(--dark);

		a {
			color: inherit;
			text-decoration: none;
			transition: color 0.1s;

			&:hover { color: var(--red); }
		}
	}

	.authors {
		font-size: 12px;
		color: var(--mid);
		font-family: 'DM Mono', monospace;
		font-style: italic;
		line-height: 1.4;

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

		.name {
			cursor: default;
			position: relative;

			sup {
				font-size: 9px;
				color: var(--red);
				font-style: normal;
				vertical-align: super;
				line-height: 0;
				margin-left: 1px;
			}

			.tooltip {
				position: absolute;
				z-index: 9999;
				background: var(--dark);
				color: #ccc;
				font-family: 'DM Sans', sans-serif;
				font-size: 11px;
				font-style: normal;
				line-height: 1.5;
				padding: 6px 10px;
				border-radius: 4px;
				max-width: 320px;
				width: max-content;
				pointer-events: none;
				bottom: 100%; left: 90%;
				transition: opacity 0.12s;
				opacity: 0;

				a {
					color: #ccc;
					text-decoration: none;
					border-bottom: 1px solid #555;
					&:hover { color: var(--white); border-bottom-color: #aaa; }
				}
			}
		}
	}

	.meta {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
		margin-top: 8px;

		&:empty { display: none; }
	}

	.links {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		flex-shrink: 0;

		a {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			padding: 3px 7px 3px 5px;
			border-radius: 20px;
			text-decoration: none;
			opacity: 0.75;
			transition: opacity 0.1s;

			&:hover { opacity: 1; }

			svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }

			span {
				font-family: 'DM Sans', sans-serif;
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 0.02em;
				line-height: 1;
			}

			&[data-type="doi"]      { color: var(--c-doi); }
			&[data-type="abstract"] { color: var(--c-abstract); }
			&[data-type="preprint"] { color: var(--c-preprint); }
			&[data-type="video"]    { color: var(--c-video); }
			&[data-type="code"]     { color: var(--c-code); }
			&[data-type="slides"]   { color: var(--c-slides); }
			&[data-type="images"]   { color: var(--c-images); }
			&[data-type="data"]     { color: var(--c-data); }
			&[data-type="related"]  { color: var(--c-related); }
		}
	}
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Grouped Layout ── */
.conf {
	.heading {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 24px 0 0;
		padding: 12px 18px;
		background: rgb(17, 17, 17);
		border-radius: 4px;
		cursor: pointer;
		user-select: none;
		transition: background 0.1s;

		&:hover { background: #222; }

		.name {
			font-family: 'Bebas Neue', sans-serif;
			font-size: 26px;
			letter-spacing: 2px;
			color: var(--white);
			line-height: 1.1;
		}

		.count {
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: #666;
			white-space: nowrap;
		}

		.chevron {
			margin-right: 4px;
			order: -1;
			color: #666;
			transition: transform 0.2s;
			flex-shrink: 0;

			svg { width: 16px; height: 16px; fill: currentColor; display: block; }
		}
	}

	&.collapsed {
		.chevron { transform: rotate(-90deg); }
		.papers { max-height: 0 !important; opacity: 0 !important; }
	}
}

.section {
	.heading {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 12px 0 12px;
		padding: 7px 18px;
		border-left: 3px solid var(--red);
		background: #faf0f0;
		border-radius: 0 2px 2px 0;
		cursor: pointer;
		user-select: none;
		transition: background 0.1s;

		&:hover { background: #f5e8e8; }

		.name {
			font-family: "DM Sans", sans-serif;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: var(--red);
		}

		.chevron {
			order: -1;
			color: var(--red);
			opacity: 0.5;
			transition: transform 0.18s;

			svg { width: 12px; height: 12px; fill: currentColor; display: block; }
		}
	}

	.papers {
		opacity: 1;
		transition: max-height 0.22s ease, opacity 0.18s ease;
	}

	&.collapsed {
		.chevron { transform: rotate(-90deg); }
		.papers { max-height: 0 !important; opacity: 0; }
		.heading { margin-bottom: 0; }
	}

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

/* ── Footer ── */
footer {
	z-index: 20;
	background: #1a1a1a;
	text-align: center;
	font-size: 12px;
	color: var(--mid);
	letter-spacing: 1px;
	padding: 24px;
	margin-top: 10px;

	a {
		color: var(--border);
		text-decoration: none;
		transition: color 0.1s;

		&:hover { color: var(--red); }
	}
}

body:not(.idle) footer { display: block; }