/* publications.css — the Publications page: the theme filter and the citation
 * list. Loaded only by publications/index.html.
 *
 * main.css sets `button { color: #000000 !important }`, so the filter's colour
 * states below need !important of their own to take effect. */

/* ── Layout: filter on the left, citations on the right ─────────────────── */

#page-top {
	padding-top: 1rem;
}

.publications-layout {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	margin-top: 0;
	width: 100%;
}

#publications-filter {
	flex: 0 0 18rem;
	max-width: 18rem;
	margin-top: 3rem;
	text-align: left;
}

#publications-list {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	max-width: none;
	text-align: left;
}

/* ── Page heading ───────────────────────────────────────────────────────── */

/* The filter list sits directly under the heading with no section boundary
   between them, so the template's parting space is not wanted here. */
#page-top header { margin-bottom: 0; }

/* The count of what the filter matched, under the list. It needs no reserved
   height: it sits below the options, so growing or shrinking moves nothing you
   might be aiming at. The line above it closes the list, matching the rules
   that separate one theme from the next. */
#publication-count {
	margin: 0;
	padding-top: 0.8rem;
	border-top: solid 1px rgba(0, 0, 0, 0.2);
	font-size: 0.8rem;
	/* 400, not 300: this was the only italic on the site below 400, and a
	   weight of its own is a whole extra font file for one line of text. */
	font-weight: 400;
	font-style: italic;
	color: var(--ink);
	opacity: 0.65;
}

/* ── Theme filter ───────────────────────────────────────────────────────── */

#publications-filter h3 {
	margin-top: 0;
	margin-bottom: 1rem;
}

#publications-filter .theme-filter-list {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* No padding or margin here, and none between one row and the next: the space
   belonged to the list item rather than to the button inside it, so 16px of
   every 40px down the list was not a target. The pointer crossed a dead band
   between each pair of themes -- hover flickered off, and a click that landed
   in one did nothing at all. The button carries that space as its own padding
   now, so the rows tile and the whole row is clickable. The rule between them
   is the only thing separating two targets. */
#publications-filter .theme-filter-list li {
	display: block;
	border-top: solid 1px rgba(0, 0, 0, 0.2);
	padding: 0;
	margin: 0;
}

#publications-filter .theme-filter-list li:first-child {
	border-top: 0;
}

#publications-filter .theme-filter {
	all: unset;

	/* Flex, so the dot centres against the label. As an inline box it took
	   vertical-align: middle, which is not the middle of the line: it is the
	   baseline plus half an x-height, and it left the dot sitting low. */
	display: flex;
	align-items: center;
	width: 100%;
	/* Even, so the label sits on the middle of its row rather than riding high
	   against the rule above it. The total is the 1.1rem the row has always
	   had, so the list is exactly as tall as before -- only the text within
	   each row has moved. */
	padding: 0.55rem 0;

	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 300;
	line-height: 1.15;

	text-align: left;
	cursor: pointer;
	color: var(--ink) !important;
}

/* The dot carries the theme's own colour, set as --theme-dot on the button by
   assets/js/publications.js out of data/research-themes.json. The All button is
   not a theme and takes the fallback grey. */
#publications-filter .theme-filter::before {
	content: "";
	/* flex: 0 0 auto or the dot is squeezed out of shape beside a long label. */
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	margin-right: 0.65rem;
	background: var(--theme-dot, #cccccc);
}

#publications-filter .theme-filter:hover {
	color: var(--link-hover) !important;
}

/* The chosen theme is underlined as well as recoloured, so its state does not
   rest on colour alone. The theme colours themselves are far too light to read
   as text -- they stay on the dot, where they identify nothing on their own. */
#publications-filter .theme-filter.is-active {
	color: var(--link) !important;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* ── Citation list ──────────────────────────────────────────────────────── */

.publication-year-group {
	margin-top: 3rem;
}

.publication-year-group h3 {
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
	padding-bottom: 0.5rem;
}

.publication-entry {
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

/* Marked for a moment when arrived at from a link, so it is obvious which
   entry in a long list was meant. */
.publication-entry.is-target {
	background: color-mix(in srgb, var(--link) 12%, transparent);
	box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--link) 12%, transparent);
	border-radius: 2px;
	transition: background 0.5s ease, box-shadow 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {

	.publication-entry.is-target {
		transition: none;
	}

}

.publication-title {
	font-style: italic;
	font-weight: 700;
	margin-bottom: 0.2rem;
}

.publication-citation {
	margin: 0;
}

.publication-authors,
.publication-meta {
	display: inline;
}

.publication-meta::before {
	content: " ";
}

.publication-links {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 0.35rem;
}

.publication-bibtex {
	margin-left: 0;
}

.publication-bibtex summary {
	cursor: pointer;
}

.publication-bibtex pre {
	margin-top: 0.75rem;
	overflow-x: auto;
	white-space: pre-wrap;
	font-size: 0.9rem;
}

/* A theme's own link, above the year groups: not a paper, so it is a bordered
   strip rather than another citation. The whole strip is the link. */
.publication-aside {
	display: block;
	margin-bottom: 2rem;
	padding: 0.9rem 1.1rem;
	border: solid 1px rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	/* main.css underlines links with a border-bottom; the shorthand above
	   already set all four sides, and this keeps them matching. */
	text-decoration: none;
}

.publication-aside:hover,
.publication-aside:focus-visible {
	border-color: var(--link);
	background: color-mix(in srgb, var(--link) 6%, transparent);
}

.publication-aside-label {
	display: block;
	font-weight: 700;
	color: var(--link);
}

.publication-aside-note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.9rem;
	color: var(--ink);
}

/* ── Narrow screens: the filter stops being a column and sits above ─────── */

@media (max-width: 980px) {
	.publications-layout {
		flex-direction: column;
	}

	#publications-filter {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
		margin-top: 0;
	}
}