/* ===== GENERAL ===== */

/* General */
:root {
	--previewBackgroundColor1 : 192, 192, 192 ;
	--previewBackgroundColor2 : 64, 64, 64 ;
}

/* Page navigation */
.page_navigation_heading {
	--backgroundColorActive : 224, 224, 224 ;
	--colorHover : #C0C080 ;
	--colorActive : #080808 ;
	--colorActiveHover : #000000 ;
}

/* Articles */
article {
	--textBackgroundColor : 64, 64, 64 ;
}


/* ===== ARTICLE : RADIOLOGIST ===== */

/* 3D model */
.model_container {
	height : 400px ;
	width : 100% ;
}

model-viewer {
	--poster-color : transparent ;
	--progress-bar-color : rgba(255, 255, 255, 0.1) ;
	
	height : 100% ;
	width : 100% ;
}

.hotspot {
	--min-hotspot-opacity : 0 ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	transition : opacity 0.2s ease, transform 0.2s ease ;
}

.hotspot_legend {
	padding : 5px 10px ;
	
	border-radius : 3px ;
	
	color : rgba(255, 255, 255, 0.9) ;
	text-shadow : 0 0 8px rgba(128, 128, 128, 0.9) ;

	font-size : 18px ;
	font-weight : bold ;
	letter-spacing : 1px ;
	
	transition : text-shadow 0.2s ease, scale 0.2s ease ;
}
	.hotspot_legend.with_tooltip {
		cursor : help ;
	}
		.hotspot_legend.with_tooltip:hover {
			text-shadow : 0 0 8px rgba(224, 224, 224, 0.9) ;
			
			scale : 1.25 ;
		}

.hotspot_tooltip {
	position : absolute ;
	top : 100% ;
	left : 50% ;
	width : 250px ;
	padding : 5px ;
	
	background : rgba(64, 64, 64, 0.75) ;
	border : 1px solid rgba(128, 128, 128, 0.75) ;
	border-radius : 5px ;
	
	color : rgba(255, 255, 255, 0.9) ;
	font-size : 16px ;
	
	opacity : 0 ;
	
	pointer-events : none ;
	
	translate : -50% calc(0% - 10px) ;
	
	transition : opacity 0.2s ease, translate 0.2s ease ;
}
	.hotspot_legend.with_tooltip:hover + .hotspot_tooltip {
		opacity : 1 ;
		
		translate : -50% 0% ;
	}

.hotspot .important {
	color : orange ;
	font-weight : bold ;
}

/* This keeps child nodes hidden while the element loads */
:not(:defined) > * {
	display : none ;
}


/* ===== ARTICLE : RESEARCH ARTICLES ===== */

/* Research articles list */
.research .article_preview {
	position : relative ;
	
	max-height : unset ;
	
	perspective : 500px ;
}

.research_articles {
	max-height : 50vh ;
	
	font-size : 0.9em ;
	text-align : left ;
	line-height : 1.5em ;
}

.research_article {
	margin-top : 5px ;
	padding : 5px 10px ;
	
	display : block ;
	
	border-radius : 10px ;
	
	cursor : pointer ;
}
	article a.research_article {
		text-decoration : none ;
	}
	article a.research_article:hover {
		color : unset ;
		text-shadow : unset ;
	}
	.research_article:before {
		content : "\2022" ;
		margin-right : 10px ;
	}
	
	.research_article[data-preview].active {
		background : rgba(255, 255, 255, 0.75) ;
		color : black ;
	}
	.research_article[data-preview]:hover {
		background : rgba(255, 255, 255, 0.9) ;
		color : black ;
	}
	
	.research_article:not([data-preview]) {
		color : #C0C0C0 ;
		
		cursor : unset ;
	}
	.research_article:not([data-preview]).active {
		background : rgba(128, 128, 128, 0.5) ;
		color : #C0C0C0 ;
	}
	.research_article:not([data-preview]):hover {
		background : rgba(128, 128, 128, 0.6) ;
		color : #C0C0C0 ;
	}

/* Research book cover */
.research_book {
	--bookCoverLeftPart1Width : 12px ;
	--bookCoverLeftPart2Width : 20px ;
	
	position : relative ;
	height : 550px ;
	width : 450px ;
	
	margin : 5px ;
	
	perspective : 500px ;
}

.research_book_cover {
	/*
	--bookCoverColorMain : grey ;
	--bookCoverColorMinus1 : #404040 ;
	--bookCoverColorMinus2 : #202020 ;
	--bookCoverColorPlus1 : #C0C0C0 ;
	--bookCoverColorPlus2 : #F0F0F0 ;
	*/
	--bookCoverDyingAnimationDuration : 1s ;
	
	--bookCoverColorMain : #C49E2F ;
	--bookCoverColorMinus1 : #765F1C ;
	--bookCoverColorMinus2 : #271F09 ;
	--bookCoverColorPlus1 : #DEC378 ;
	--bookCoverColorPlus2 : #F1E6C7 ;
	
	position : relative ;
	height : 100% ;
	width : 100% ;
	z-index : 1000 ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : center ;

	filter : drop-shadow(10px 10px 10px rgba(50, 50, 0, 0.5)) ;
	
	perspective : 500px ;
}
	.research_book_cover.dying {
		pointer-events : none ;
		
		animation : researchBookCoverDyingAnimation var(--bookCoverDyingAnimationDuration) ease forwards ;
	}
		@keyframes researchBookCoverDyingAnimation {
			0% {
				
			}
			50% {
				opacity : 1 ;
			}
			100% {
				opacity : 0 ;
			}
		}

.book_cover_left_part1,
.book_cover_left_part2 {
	height : 100% ;
}

.book_cover_left_part1 {
	width : var(--bookCoverLeftPart1Width) ;
	
	clip-path : polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px)) ;
	
	background : linear-gradient(to right, var(--bookCoverColorMinus2) 20%, var(--bookCoverColorMain) 60%) ;
}

.book_cover_left_part2 {
	width : var(--bookCoverLeftPart2Width) ;
	
	background : linear-gradient(to right, var(--bookCoverColorMain), var(--bookCoverColorPlus1) 5%, var(--bookCoverColorMinus1) 20%,
											var(--bookCoverColorMinus1) 60%, var(--bookCoverColorPlus1) 80%, var(--bookCoverColorPlus2) 90%, var(--bookCoverColorMain)) ;
}

.book_cover_main_part {
	position : relative ;
	height : 100% ;
	width : calc(100% - var(--bookCoverLeftPart1Width) - var(--bookCoverLeftPart2Width)) ;
	overflow : hidden ;

	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;

	text-align : center ;

	background : var(--bookCoverColorMain) ;
	border-radius : 0 5px 5px 0 ;
	
	opacity : 0.9 ;
	
	transform-origin : left 50% ;
	transform-style : preserve-3d ;
	
	transition : transform 0.5s ease ;
}
	.research_book_cover:not(.dying):hover .book_cover_main_part {
		transform : rotateY(-10deg) ;
	}
	
	.research_book_cover.dying .book_cover_main_part {
		transform : rotateY(-10deg) ;
		
		animation : researchBookCoverDyingMainPartAnimation var(--bookCoverDyingAnimationDuration) ease forwards ;
	}
		@keyframes researchBookCoverDyingMainPartAnimation {
			0% {
				
			}
			50% {
				transform : rotateY(-30deg) ;
			}
			100% {
				transform : rotateY(-45deg) ;
			}
		}

.book_cover_background_image {
	height : auto ;
	width : 80% ;
	
	filter : drop-shadow(3px 3px 5px rgba(255, 255, 255, 0.5)) ;
}

.book_cover_description,
.book_cover_title_container,
.book_cover_author {
	position : absolute ;

	width : 90% ;

	text-align : center ;
}

.book_cover_description {
	top : 5% ;
	
	color : black ;
	
	font-style : italic ;
}

.book_cover_description_number {
	margin : 0 3px ;
	
	color : #4080C0 ;
	
	font-size : 1.25em ;
	font-weight : bold ;
	text-shadow : 0 0 5px lightblue ;
}

.book_cover_title_container {
	top : 50% ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	font-size : 3em ;
	font-weight : bold ;
	text-shadow : 0 0 5px ;
}

.book_cover_title_part1,
.book_cover_title_part2 {
	--radius : 175px ;
	--angleBase : 0deg ;
	--angleDifferential : 10deg ;
	--angleCorrectionPosition : -90deg ;
	--angleCorrectionRotation : 0deg ;
	--offsetY : -15px ;
	--indexMultiplier : 1 ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
}
.book_cover_title_part2 {
	--angleBase : 180deg ;
	--angleCorrectionRotation : 180deg ;
	--indexMultiplier : -1 ;
	
	font-size : 1.1em ;
	text-transform : uppercase ;
}

.book_cover_title_part1 > div,
.book_cover_title_part2 > div {
	--index : 0 ;
	--angle : calc(var(--angleBase) + (var(--angleDifferential) * var(--index) * var(--indexMultiplier))) ;
	--positionX : calc(var(--radius) * cos(var(--angle) + var(--angleCorrectionPosition))) ;
	--positionY : calc((var(--radius) * sin(var(--angle) + var(--angleCorrectionPosition))) - var(--offsetY)) ;
	
	position : absolute ;
	
	color : black ;
	
	translate : var(--positionX) var(--positionY) ;
	rotate : calc(var(--angle) + var(--angleCorrectionRotation)) ;
	
	animation : bookCoverTitlePartAnimation 4s ease calc(0.15s * var(--index)) infinite ;
}
.book_cover_title_part2 > div {
	--positionY : calc((var(--radius) * sin(var(--angle) + var(--angleCorrectionPosition))) + var(--offsetY)) ;
}
	@keyframes bookCoverTitlePartAnimation {
		0%,
		35% {
			color : black ;
			text-shadow : 0 0 5px ;
		}
		40% {
			scale : 1 ;
		}
		50% {
			color : #F0F0F0 ;
			text-shadow : 0 0 10px ;
			scale : 2 ;
		}
		60% {
			scale : 1 ;
		}
		65%,
		100% {
			color : black ;
			text-shadow : 0 0 5px ;
		}
	}
	
	.book_cover_title_part1 > div:nth-of-type(1) {
		--index : -3 ;
	}
	.book_cover_title_part1 > div:nth-of-type(2) {
		--index : -2 ;
	}
	.book_cover_title_part1 > div:nth-of-type(3) {
		--index : -1 ;
	}
	.book_cover_title_part1 > div:nth-of-type(4) {
		--index : 0 ;
	}
	.book_cover_title_part1 > div:nth-of-type(5) {
		--index : 1 ;
	}
	.book_cover_title_part1 > div:nth-of-type(6) {
		--index : 2 ;
	}
	.book_cover_title_part1 > div:nth-of-type(7) {
		--index : 3 ;
	}
	
	.book_cover_title_part2 > div:nth-of-type(1) {
		--index : -3.5 ;
	}
	.book_cover_title_part2 > div:nth-of-type(2) {
		--index : -2.5 ;
	}
	.book_cover_title_part2 > div:nth-of-type(3) {
		--index : -1.5 ;
	}
	.book_cover_title_part2 > div:nth-of-type(4) {
		--index : -0.5 ;
	}
	.book_cover_title_part2 > div:nth-of-type(5) {
		--index : 0.5 ;
	}
	.book_cover_title_part2 > div:nth-of-type(6) {
		--index : 1.5 ;
	}
	.book_cover_title_part2 > div:nth-of-type(7) {
		--index : 2.5 ;
	}
	.book_cover_title_part2 > div:nth-of-type(8) {
		--index : 3.5 ;
	}

.book_cover_author {
	bottom : 5% ;
	
	color : #202010 ;
	
	font-size : 1.2em ;
}

/* Research book page */
.research_book_page {
	--border : 4px ;
	--offset : 2px ;
	--pageNumberMax : 3 ;
	--dyingAnimationDuration : 1s ;
	
	position : absolute ;
	top : 0 ;
	left : 0 ;
	
	height : calc(100% - (var(--border)) - (var(--border) + (var(--offset) * var(--pageNumberMax)))) ;
	width : calc(100% - (var(--bookCoverLeftPart1Width) + var(--bookCoverLeftPart2Width)) - (var(--border) + (var(--offset) * var(--pageNumberMax)))) ;
	overflow : hidden ;
	
	margin-left : calc(var(--bookCoverLeftPart1Width) + var(--bookCoverLeftPart2Width)) ;
	margin-top : var(--border) ;
	margin-right : calc(var(--border) + (var(--offset) * var(--pageNumberMax))) ;
	margin-bottom : calc(var(--border) + (var(--offset) * var(--pageNumberMax))) ;
	
	background : var(--backgroundWhite) ;
	color : var(--colorBlack) ;
	
	border : 1px solid grey ;
	border-radius : 5px ;
	box-shadow : 3px 3px 5px rgba(128, 128, 128, 0.5) ;
	
	transform-style : preserve-3d ;
	
	transition : box-shadow 0.2s ease, scale 0.2s ease, transform 0.2s ease ;
}
	.research_book_page:not(.empty):not(.no_preview) {
		cursor : zoom-in ;
	}
	.research_book_page:not(.empty):not(.no_preview):hover {
		box-shadow : 0 0 10px white ;
		scale : 1.1 ;
	}

.research_book_page.empty {
	--pageNumber : 0 ;
	
	z-index : calc(-1 * var(--pageNumber)) ;
	
	translate : calc(2px * var(--pageNumber)) calc(2px * var(--pageNumber)) ;
}

.research_book_page.no_preview {
	padding : 20px ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	gap : 10% ;
}

.page_no_preview_background {
	position : absolute ;
	top : 50% ;
	left : 50% ;
	z-index : -1 ;
	
	color : grey ;
	
	font-size : 10em ;
	text-shadow : 0 0 10px ;
	
	opacity : 0.25 ;
	
	translate : -50% -50% ;
}

.page_no_preview_text > p:nth-of-type(2) {
	font-size : 0.95em ;
	font-style : italic ;
}

.page_no_preview_smiley {
	font-size : 5em ;
	font-weight : bold ;
}

.research_book_page.dying {
	transform-origin : left 50% ;
	
	pointer-events : none ;
	
	animation : researchBookPageDyingAnimation var(--dyingAnimationDuration) ease forwards ;
}
	@keyframes researchBookPageDyingAnimation {
		0% {
			
		}
		33% {
			filter : none ;
			opacity : 1 ;
			transform : translate(-10px, -10px) ;
		}
		100% {
			filter : blur(5px) ;
			opacity : 0 ;
			transform : translate(-30%, 10px) rotateY(-45deg) scale(0.9) ;
		}
	}

/* Research article dialog */
.research_article_dialog_title {
	height : 100% ;
	min-height : 30px ;
	max-height : 90px ;
	width : 100% ;
	overflow : auto ;
	
	padding : 5px 20px ;
	
	background : rgba(240, 240, 240, 0.5) ;
	border : 1px solid #C0C0C0 ;
	border-radius : 10px ;
	
	font-size : 1.1em ;
	font-weight : bold ;
	line-height : normal ;
	text-shadow : 2px 2px 4px #C0C0C0 ;
	
	box-shadow : 3px 3px 5px #C0C0C0 ;
}

.research_article_dialog_preview {
	height : auto ;
	width : 100% ;
	overflow : auto ;
	
	margin : 0 ;
	
	display : flex ;
    flex-direction : column ;
    flex-wrap : nowrap ;
    justify-content : flex-start ;
    align-items : flex-start ;
	
	border : 1px solid grey ;
}
	.research_article_dialog_preview.disabled {
		background : #F0F0F0 ;
	}

.research_article_dialog_preview_none {
	height : 100% ;
	width : 100% ;
	padding : 5px 10px ;
	
	display : flex ;
    flex-direction : column ;
    flex-wrap : nowrap ;
    justify-content : center ;
    align-items : center ;
	
	color : #404040 ;
	font-style : italic ;
	
	display : none ;
}
	.research_article_dialog_preview.disabled > .research_article_dialog_preview_none {
		display : flex ;
	}

.research_article_dialog_preview_image {
	width : 100% ;
	height : auto ;
}
	.research_article_dialog_preview.disabled > .research_article_dialog_preview_image {
		display : none ;
	}

/* PDF viewer mode : the whole article is rendered by the browser (desktop only,
set by r_d.js when the article has a PDF). The iframe fills the whole dialog body :
no unused strip below, no gap on the sides. */
.research_article_dialog_preview.pdf_mode {
	align-items : stretch ;
	overflow : hidden ;
	
	position : relative ;
	background : #17171A ;		/* Dark, like the browser PDF engine frame : a seamless hand-over */
}
	/* Loading placeholder : the browser PDF engine opens on a dark frame, so the
	placeholder is dark too, and the iframe stays invisible until its content has loaded */
	.research_article_dialog_preview.pdf_mode::before {
		content : "Loading the article..." ;
		
		position : absolute ;
		top : 50% ;
		left : 50% ;
		transform : translate(-50%, -50%) ;
		
		color : #9A9AA2 ;
		font-style : italic ;
	}
	.research_article_dialog_preview.pdf_mode:has(.research_article_dialog_preview_pdf.loaded)::before {
		display : none ;
	}
.research_article_dialog_preview_pdf {
	display : none ;
	
	height : 100% ;
	width : 100% ;
	flex : 1 ;
	min-height : 0 ;
	
	border : none ;
	
	background : #17171A ;
	
	opacity : 0 ;
	transition : opacity 0.15s ease ;
}
	.research_article_dialog_preview_pdf.loaded {
		opacity : 1 ;
	}
	.research_article_dialog_preview.pdf_mode > .research_article_dialog_preview_pdf {
		display : block ;
	}
	.research_article_dialog_preview.pdf_mode > .research_article_dialog_preview_none,
	.research_article_dialog_preview.pdf_mode > .research_article_dialog_preview_image {
		display : none ;
	}

/* The dialog body always spans the full dialog width (an iframe has no intrinsic
width : without this, the shrink-to-fit layout could leave a side gap) */
.dialog_main:has(.research_article_dialog_preview) {
	width : 100% ;
	align-self : stretch ;
}

.research_article_dialog_download,
.research_article_dialog_link {
	margin-top : 10px ;
	margin-bottom : 10px ;
	padding-top : 5px ;
	padding-bottom : 5px ;
}
	.research_article_dialog_download.disabled,
	.research_article_dialog_link.disabled {
		filter : grayscale(1) ;
		opacity : 0.5 ;
		
		pointer-events : none ;
	}


/* ===== ARTICLE : RADEX ===== */
.radex .article_preview {
	overflow-x : hidden ;
	
	box-shadow : 10px 10px 20px var(--backgroundColor) ;
}

/* ===== RESEARCH DIALOG : the preview fills the dialog ===== */

.research_article_dialog_title {
	flex : none ;
}

.research_article_dialog_preview_image {
	width : 100% ;
	height : auto ;
}

.research_article_dialog_download,
.research_article_dialog_link {
	flex : none ;
	align-self : center ;
}

.research_article_dialog_preview {
	overflow-anchor : none ;
	margin : 0 ;
}

/* The preview is the whole dialog body ; the Download floats over it */
.dialog_main:has(.research_article_dialog_preview) {
	position : relative ;
	display : grid ;
	grid-template-columns : 1fr ;
	grid-template-rows : minmax(0, 1fr) ;
}
.research_article_dialog_title {
	grid-row : 1 ;
	grid-column : 1 ;
}
.research_article_dialog_preview {
	grid-row : 1 ;
	grid-column : 1 ;
	margin : 0 ;
	/* The legacy height:100% sized it to its content : centered in its row, its
	   top vanished behind the title. It now fills exactly its grid row. */
	height : auto ;
	min-height : 0 ;
	align-self : stretch ;
}

/* The list scrolls inside the card instead of inflating it */
.research_articles {
	max-height : 240px ;
	overflow-y : auto ;
	overscroll-behavior : contain ;
	padding-right : 6px ;
}

/* The full citation is redundant inside the dialog (the header already names it) */
.research_article_dialog_title {
	display : none ;
}

/* Download and external link : floating symbols over the preview (no wasted
row). Wrapped in .research_article_dialog_actions so they sit side by side in a
ROW, pinned to the bottom-right CORNER of the preview cell. Placing the wrapper
in the same grid cell as the preview (instead of position:absolute on the whole
dialog body) keeps it inside the visible frame at every size : on a phone the
download no longer drops below the shorter preview. */
.research_article_dialog_actions {
	grid-row : 1 ;
	grid-column : 1 ;
	align-self : end ;
	justify-self : end ;
	z-index : 2 ;
	margin : 0 20px 16px 0 ;
	
	display : flex ;
	flex-direction : row ;
	align-items : center ;
	gap : 12px ;
	
	pointer-events : none ;		/* the gap lets clicks fall through to the preview */
}
.research_article_dialog_download,
.research_article_dialog_link {
	position : static ;
	width : 42px ;
	height : 42px ;
	min-height : 0 ;
	margin : 0 ;
	padding : 0 ;
	background : #17171A ;
	border : none ;
	border-radius : 50% ;
	box-shadow : 0 6px 18px rgba(0, 0, 0, 0.3) ;
	color : #FFFFFF ;
	font-size : 0 ;
	display : flex ;
	align-items : center ;
	justify-content : center ;
	
	pointer-events : auto ;		/* re-enable on the buttons themselves */
}
/* Explicit line icons (external-link / download tray) : clearer than the bare
arrow glyphs. currentColor = the button text colour, sized by the rule below. */
.research_article_dialog_download svg,
.research_article_dialog_link svg {
	display : block ;
	width : 20px ;
	height : 20px ;
}
.research_article_dialog_download:hover,
.research_article_dialog_link:hover {
	background : #303038 ;
	color : #FFFFFF ;
	translate : none ;
	transform : none ;
}

/* A disabled floating button disappears entirely (a grayed circle over the
preview would only be noise) ; an empty wrapper collapses to nothing */
.research_article_dialog_download.disabled,
.research_article_dialog_link.disabled {
	display : none ;
}

/* The research book at a size consistent with the other illustrations */
.research_book {
	zoom : 0.75 ;
}

/* Flex column children shrink by default : a tall preview image was crushed
   instead of scrolling */
.research_article_dialog_preview_image {
	flex : 0 0 auto ;
}

/* Radex : no scrollbar (overflow-x hidden used to force overflow-y to auto),
   and the screenshot fills the plate width */
.radex .article_preview {
	overflow : hidden ;
	height : auto ;		/* The fixed plate metrics were cropping the screenshot */
	min-height : 0 ;
	max-height : none ;
}
.radex .article_preview > img {
	width : 100% ;
	height : auto ;
	flex : 0 0 auto ;	/* A flex item shrinks by default : the image imposes its height */
	display : block ;
}