/*
	Publications page: filter bar + side index (see js/publications.js).
	Only active when the script has built the layout (body.has-pub-index).
*/

/* Sticky needs an ancestor without overflow:hidden (boxed skin uses it to contain floats) */
.has-pub-index #outer {
	overflow: visible;
	display: flow-root;
}


/*	Filter bar: multi-select comboboxes with instant search
___________________________________________________________________ */
.pub-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}
.pub-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
}
.pub-combo-wrap {
	position: relative;
	width: 240px;
}
.pub-combo-wrap[data-key="year"] {
	width: 150px;
}
.pub-combo-wrap[data-key="venue"] {
	width: 270px;
}
.pub-combo {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	min-height: 34px;
	box-sizing: border-box;
	padding: 3px 28px 3px 4px;
	border: 1px solid #c4c4c4;
	border-radius: 3px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23333' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
	cursor: text;
}
.pub-combo:focus-within {
	border-color: #333;
	box-shadow: 0 0 0 1px #333;
}
.pub-combo-wrap.is-active .pub-combo {
	border-color: #006e96;
}
.pub-combo-input {
	flex: 1 0 60px;
	min-width: 0;
	height: 26px;
	margin: 0;
	padding: 0 4px;
	border: 0;
	outline: 0;
	background: transparent;
	color: #333;
	font: 13px Helvetica, Arial, sans-serif;
}
.pub-combo-input::placeholder {
	color: #6b6b6b;
	opacity: 1;
}
.pub-combo-wrap.has-value .pub-combo-input::placeholder {
	color: #006e96; /* the summary "A, B & +3" looks like a value */
}
.pub-combo-clear {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #6b6b6b;
	font: 17px/22px Helvetica, Arial, sans-serif;
	cursor: pointer;
}
.pub-combo-clear[hidden] {
	display: none;
}
.pub-combo-clear:hover {
	background: #ececec;
	color: #333;
}
.pub-combo-clear:focus-visible {
	outline: 2px solid #333;
}
#primary .pub-combo-tags {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}
#primary .pub-combo-tags li,
#primary .pub-combo-list li {
	margin: 0;
	line-height: 18px;
}
.pub-tag {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 2px 2px 2px 8px;
	border-radius: 2px;
	background: #e6f2f8;
	color: #006e96;
	font-size: 12px;
}
.pub-tag span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.pub-tag-x {
	width: 20px;
	height: 20px;
	margin: 0 0 0 2px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	color: inherit;
	font: 15px/20px Helvetica, Arial, sans-serif;
	cursor: pointer;
}
.pub-tag-x:hover {
	background: #d2e8f2;
}
.pub-tag-x:focus-visible {
	outline: 2px solid #333;
}
.pub-combo-pop {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 50;
	min-width: 100%;
	width: max-content;
	max-width: 340px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.pub-combo-list {
	max-height: 300px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
}
.pub-combo-list [role="option"] {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}
.pub-combo-list [role="option"][hidden],
.pub-combo-list[hidden] {
	display: none;
}
.pub-combo-list [role="option"]:before {
	content: '';
	flex: none;
	width: 12px;
	height: 12px;
	border: 1px solid #8a8a8a;
	border-radius: 2px;
	transform: translateY(1px);
}
.pub-combo-list [aria-selected="true"]:before {
	border-color: #006e96;
	background: #006e96 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5'/%3E%3C/svg%3E") no-repeat center / 9px 8px;
}
.pub-combo-list [role="option"]:hover {
	background: #f5f5f5;
}
.pub-combo-list [role="option"].is-active {
	background: #ececec;
}
.pub-combo-list mark {
	background: none;
	color: inherit;
	font-weight: bold;
}
.pub-combo-n {
	margin-left: auto;
	padding-left: 12px;
	color: #6b6b6b;
	font-size: 12px;
}
.pub-combo-empty {
	margin: 0;
	padding: 10px 12px;
	color: #6b6b6b;
	font-size: 13px;
}
.pub-reset,
.pub-reset-inline {
	padding: 9px 8px;
	border: 0;
	border-radius: 3px;
	background: none;
	color: #6b6b6b;
	font: 11px/16px Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: underline;
	cursor: pointer;
}
.pub-reset:hover,
.pub-reset-inline:hover {
	background: #f0f0f0;
	color: #333;
}
.pub-reset:focus-visible,
.pub-reset-inline:focus-visible {
	outline: 2px solid #333;
	outline-offset: 2px;
}
.pub-status {
	margin: 0;
	padding: 0;
	color: #6b6b6b;
	font-size: 12px;
}
.pub-empty {
	padding: 24px 0;
	color: #333;
}


/*	Two columns: index + list
___________________________________________________________________ */
.pub-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 80px; /* content left, year index on the right */
	gap: 40px;
	align-items: start;
}
.pub-layout > .pub-main {
	grid-column: 1;
	grid-row: 1;
}
.pub-layout > .pub-index {
	grid-column: 2;
	grid-row: 1;
}
.pub-main .grid_12 {
	float: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}
.pub-entry {
	scroll-margin-top: 24px;
}
/* Entry: title/journal/authors and the abstract use the full width;
   "Show abstract" and "Open PDF" share the last row. */
.pub-main .pub-entry > .grid_12 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	align-items: center;
}
.pub-main .pub-entry > .grid_12 > * {
	grid-column: 1 / -1;
}
.pub-main .pub-entry > .grid_12 > p:empty,
.pub-main .pub-entry .toggle-container > p:empty {
	display: none;
}
.pub-main .pub-entry .toggle-container {
	display: contents;
}
.pub-main .pub-entry .toggle-fulltext {
	grid-column: 1 / -1;
	order: 1;
}
.pub-main .pub-entry .toggle-container > p:has(a.toggle) {
	grid-column: 1;
	order: 2;
}
.pub-main .pub-entry > .grid_12 > .iconlist {
	grid-column: 2;
	order: 3;
	float: none;
	margin: 0;
}
.pub-main .pub-entry hr {
	margin: 22px 0 26px;
	padding: 0;
}
.pub-entry[hidden],
.pub-index-list li[hidden] {
	display: none;
}

.pub-index {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #d6d6d6 transparent;
}
.pub-index::-webkit-scrollbar {
	width: 6px;
}
.pub-index::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: #d6d6d6;
}
/* Native one-line menu, phones only */
.pub-jump {
	display: none;
}
.pub-index-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid #eee;
}
#primary .pub-index-list li {
	margin: 0;
	padding: 0;
	line-height: inherit;
}
.pub-index-list a {
	display: block;
	margin-left: -1px;
	padding: 6px 10px 6px 14px;
	border-left: 2px solid transparent;
	color: #6b6b6b;
	font-size: 12px;
	line-height: 16px;
	text-decoration: none;
}
.pub-index-list a:hover {
	color: #333;
	background: #f7f7f7;
}
.pub-index-list a[aria-current] {
	border-left-color: #006e96;
	background: #eef6fa;
	color: #333;
}
.pub-index-year {
	display: block;
	font-size: 10px;
	letter-spacing: 1px;
	color: #6b6b6b;
}
.pub-index-title img {
	height: .95em;
	width: auto;
	vertical-align: -.1em !important;
}


/*	Research activities (abroad): year sections, month | entries
___________________________________________________________________ */
.ab-year {
	scroll-margin-top: 24px;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr); /* narrow year column (user's choice in DevTools) */
	column-gap: 30px;
	margin: 0 0 28px;
	padding: 0 0 20px;
	border-bottom: 1px solid #eee;
}
.ab-year > .ab-row {
	grid-column: 2;
}
.ab-year[hidden],
.ab-row[hidden],
.ab-items p[hidden] {
	display: none;
}
#primary .ab-year-title {
	grid-column: 1;
	grid-row: 1 / span 60;
	margin: 0;
	padding: 0;
	color: #333;
	font: normal 22px/23.8px Georgia, Garamond, serif; /* same as "News" on the About page */
}
.ab-row {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr); /* same as Short CV / Teaching on the About page */
	gap: 24px;
	padding: 0 0 10px; /* same rhythm as Short CV on the About page: 22px line + 10px */
}
#primary h5.ab-month {
	margin: 0;
	padding: 0;
	color: #6b6b6b;
	font: normal 11px/26px Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
	text-align: right; /* desktop: right-aligned next to the entries */
	text-transform: uppercase;
}
#primary .ab-items p {
	margin: 0 0 10px;
	padding: 0;
	color: #333;
	font-size: 1em;
	line-height: 26px;
}
#primary .ab-items p:last-child {
	margin-bottom: 0;
}
.ab-index-list a {
	font-size: 13px;
}

/* Elements that only exist on narrow screens */
.pub-combo-badge,
.pub-combo-done {
	display: none;
}


/*	Narrow screens: one scrollable row of chips, filters open as a sheet
___________________________________________________________________ */
@media (max-width: 899px) {
	.pub-layout {
		display: block;
	}
	.pub-index {
		display: none;
	}
	.pub-tools {
		display: block;
		margin: 0 0 20px;
		padding-bottom: 10px;
	}
	.pub-filters {
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		margin: 0 -16px;
		padding: 2px 16px 6px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.pub-filters::-webkit-scrollbar {
		display: none;
	}
	.pub-filters > * {
		flex: none;
	}
	.pub-status {
		margin-top: 4px;
	}

	/* Closed combobox = chip */
	.pub-combo-wrap,
	.pub-combo-wrap[data-key="year"],
	.pub-combo-wrap[data-key="venue"] {
		width: auto;
	}
	.pub-combo {
		flex-wrap: nowrap;
		min-height: 36px;
		padding: 0 30px 0 14px;
		border: 0;
		border-radius: 18px;
		background-color: #f0f0f0;
		background-position: right 12px center;
	}
	.pub-combo:focus-within {
		box-shadow: 0 0 0 2px #333;
	}
	.pub-combo-wrap.is-active .pub-combo {
		background-color: #e6f2f8;
	}
	.pub-combo-tags {
		display: none !important;
	}
	.pub-combo-input {
		flex: none;
		width: calc(var(--len, 8) * .56em);
		height: 36px;
		color: #333;
		font-size: 16px; /* no zoom-on-focus in iOS */
	}
	.pub-combo-input::placeholder {
		color: #333;
	}
	.pub-combo-clear {
		display: none;
	}
	.is-sheet .pub-combo-clear:not([hidden]) {
		display: inline-block;
		width: 32px;
		height: 32px;
		font-size: 22px;
		line-height: 32px;
	}
	.pub-combo-badge:not([hidden]) {
		display: inline-block;
		min-width: 20px;
		height: 20px;
		margin-left: 2px;
		padding: 0 6px;
		box-sizing: border-box;
		border-radius: 10px;
		background: #006e96;
		color: #fff;
		font: 12px/20px Helvetica, Arial, sans-serif;
		text-align: center;
	}
	.pub-jump {
		display: none; /* hidden on tablet and phone as well */
		height: 36px;
		max-width: 70vw;
		padding: 0 32px 0 14px;
		border: 0;
		border-radius: 18px;
		background: #f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23333' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px;
		color: #333;
		font: 16px/36px Helvetica, Arial, sans-serif; /* 16px: no zoom-on-focus in iOS */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-appearance: none;
		appearance: none;
	}
	.pub-jump:focus-visible {
		outline: 2px solid #333;
		outline-offset: 2px;
	}
	.pub-reset {
		white-space: nowrap;
	}

	/* Open combobox = sheet over the page */
	body.pub-sheet-open {
		overflow: hidden;
	}
	.pub-combo-wrap.is-sheet {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		width: auto;
		padding: 12px;
		background: rgba(0, 0, 0, .35);
	}
	.pub-combo-wrap.is-sheet .pub-combo {
		flex: none;
		flex-wrap: wrap;
		gap: 6px;
		min-height: 56px;
		padding: 10px 12px;
		border-radius: 8px 8px 0 0;
		background: #fff;
		box-shadow: none;
	}
	.is-sheet .pub-combo-tags {
		display: contents !important;
	}
	.is-sheet .pub-combo-input {
		flex: 1 0 140px;
		width: auto;
		height: 36px;
	}
	.is-sheet .pub-combo-input::placeholder {
		color: #6b6b6b;
	}
	.is-sheet .pub-combo-badge {
		display: none !important;
	}
	.is-sheet .pub-tag {
		font-size: 14px;
		padding: 4px 4px 4px 10px;
	}
	.is-sheet .pub-tag-x {
		width: 28px;
		height: 28px;
		font-size: 18px;
		line-height: 28px;
	}
	.is-sheet .pub-combo-pop {
		position: static;
		display: flex;
		flex-direction: column;
		flex: 0 1 auto;
		min-height: 0;
		width: auto;
		max-width: none;
		border: 0;
		border-top: 1px solid #eee;
		border-radius: 0 0 8px 8px;
		box-shadow: none;
	}
	.is-sheet .pub-combo-list {
		flex: 1 1 auto;
		max-height: none;
	}
	.is-sheet .pub-combo-list [role="option"] {
		padding: 12px 16px;
		font-size: 16px;
	}
	.is-sheet .pub-combo-list [role="option"]:before {
		width: 16px;
		height: 16px;
	}
	.is-sheet .pub-combo-done {
		display: block;
		flex: none;
		margin: 8px 12px 12px auto;
		padding: 10px 22px;
		border: 0;
		border-radius: 3px;
		background: #006e96;
		color: #fff;
		font: 14px/16px Helvetica, Arial, sans-serif;
		letter-spacing: 1px;
		text-transform: uppercase;
	}
}


/*	Copy link: icon left of the title, on hover (like Carbon's heading links)
___________________________________________________________________ */
#primary .pub-entry h3.paper-title {
	position: relative;
}
.pub-copy {
	position: absolute;
	top: 1px;
	left: -32px;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: #6b6b6b;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s, background-color .15s, color .15s;
}
.pub-copy:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background: currentColor;
	-webkit-mask: var(--pub-link-icon) no-repeat center / contain;
	mask: var(--pub-link-icon) no-repeat center / contain;
	--pub-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 9.2a3 3 0 0 0 4.2 0l2.4-2.4a3 3 0 0 0-4.2-4.2l-.9.9'/%3E%3Cpath d='M9.2 6.8a3 3 0 0 0-4.2 0L2.6 9.2a3 3 0 0 0 4.2 4.2l.9-.9'/%3E%3C/svg%3E");
}
.pub-copy.is-copied:before {
	--pub-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
}
.pub-copy:after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	padding: 4px 8px;
	border-radius: 3px;
	background: #333;
	color: #fff;
	font: 11px/14px Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity .15s, transform .15s;
}
.pub-entry h3.paper-title:hover .pub-copy,
.pub-copy:focus-visible,
.pub-copy.is-copied {
	opacity: 1;
}
.pub-copy:hover {
	color: #333; /* no background, only the icon gets darker */
}
.pub-copy:hover:after,
.pub-copy:focus-visible:after,
.pub-copy.is-copied:after {
	opacity: 1;
	transform: translate(-50%, 0);
}
.pub-copy.is-copied {
	color: #006e96;
}
/* Touch screens and narrow layouts: no hover, no room in the margin */
@media (hover: none), (max-width: 1039px) {
	.pub-copy {
		display: none;
	}
}

/*	Teaching: same year | semester | course rows as Research activities
___________________________________________________________________ */
.teaching-main {
	padding-top: 12px;
}

/* Old column structure that the scripts replaced: hidden means hidden (the grid rules set display:block) */
.has-pub-index .entry-content > [hidden] {
	display: none !important;
}


/*	Phones: Research activities / Teaching without columns – year, then month above its entries
	(tablets keep the desktop columns)
___________________________________________________________________ */
@media (max-width: 719px) {
	.ab-year {
		display: block;
	}
	#primary .ab-year-title {
		padding: 0 0 14px;
	}
	.ab-row {
		display: block;
		padding-bottom: 14px;
	}
	#primary h5.ab-month {
		margin: 0 0 2px;
		text-align: left;
		font-size: 10px;
		letter-spacing: .5px;
		line-height: 18px;
	}
	#primary h5.ab-month:empty {
		display: none;
	}
	#primary .ab-items p {
		line-height: 26px;
	}
}
