/******************************************************************************
 ##############################################################################
 #####                                                                    #####
 #####   main.css of ph-Bookshelf                                         #####
 #####                                                                    #####
 ##############################################################################
 ******************************************************************************/


/*
/*
/******************************************************************
 **       Overall Variable                                       **
 ******************************************************************/
:root {
	
	--color-font-base: #223b5c;
	--color-font-base-link: #409dff;
	--color-font-base-link-hover: #0033ff;
	--color-font-base-link-visited: #a27aeb;
	--color-font-base-link-visited-hover: #5a00ff;
	--color-font-base-link-focus-bg: #33aee92b;
	
	--color-sidebar-background: #f6f8fa;
	--color-font-sidebar: var(--color-font-base);
	--color-scrollbar-sidebar-background: none;
	--color-scrollbar-sidebar-foreground: #78a8e021;
	
	--color-warn-noscript: #ce263d;
	--color-font-warn-noscript: #f5eaea;
	--color-font-sidebar-sitetitle: #3a2b8c;
	--color-font-sidebar-sitetitle-highlight: #4a60b6;
	--color-sidebar-sitetitle-background: #e8f0fe;
	
	--color-menu-list-separator: #ebeff2;
	--color-menu-child-list-line: #78a8e021;
	--color-menu-item-indicator-current: #6bacf1;
	--color-menu-item-indicator-focus: #91c6ff;
	--color-font-menu-item-current: #3697ff;
	--color-font-menu-item-hover: #71b3f9;
	
	--color-tools-button-background: #f6f8fa;
	--color-tools-button-background-active: #eef1f4;
	--color-font-tools-button: #c3ccd6;
	
	--color-scrollbar-main-background: var(--color-scrollbar-sidebar-foreground);
	--color-scrollbar-main-foreground: var(--color-menu-item-indicator-focus);
	
}

:root {
	
	--sidebar-width: 19rem;
	--sidebar-margin-width: 2rem;
	--sidebar-margin-height: 2rem;
	--sidebar-font-size: 0.83rem;
	
	--sidebar-menu-container-external-max-height: 30%;
	
	--sidebar-menu-container-padding-width: 1.3rem;
	--sidebar-menu-container-padding-height: 0.8rem;
	--sidebar-menu-item-indent-width: 1.1rem;
	
	--sidebar-menu-list-seperator-width: 3px;
	--sidebar-menu-list-seperator-length: 66%;
	--sidebar-menu-item-indicator-active-width: 4px;
	--sidebar-menu-item-indicator-focus-width: 4px;
	
	--main-margin-height: 2rem;
	--main-margin-width: 2rem;
	
	--main-scrollbar-width: 0.5rem;
	
	--tools-button-padding: 0.75rem;
	--tools-font-size: 0.83rem;
	
	--article-padding-height: 2rem;
	--article-padding-width: 2rem;
	/*--article-margin-top: 3rem;*/
	--article-margin-top: 0;
	--article-margin-bottom: 30vh;
	--article-width-max: 800px;
	
}

:root {
	
	--sidebar-radius: 0.5rem;
	
	--object-opacity-weakness: 0.4;
	
}

:root {
	--font-sarasa-gothic: "Sarasa Gothic J", "Sarasa Gothic K", "Sarasa Gothic TC", "Sarasa Gothic SC";
	--font-sarasa-mono: "Sarasa Mono J", "Sarasa Mono K", "Sarasa Mono TC", "Sarasa Mono SC";
	--font-sans-serif: "Alibaba Puhuiti", var(--font-sarasa-gothic), sans-serif;
	--font-serif: "Georgia", serif;
	/*--font-sans-serif: sans-serif;*/
	/*--font-serif: "Times New Roman", serif;*/
	--font-monospace: "Fira Code", "Monaco", "Consolas", var(--font-sarasa-mono), monospace;
}

:root {
	
	--element-href-anima-speed: 0.1s;
	
	--sidebar-toggle-anima-speed: 0.4s;
	
	--sidebar-menu-item-anima-speed: 0.15s;
	--sidebar-menu-item-parent-arrow-anima-speed: 0.2s;
	--sidebar-menu-item-children-anima-speed: 0.2s;
	
	--tools-button-hover-anima-speed: 0.2s;
	
}

:root {
	--animation-speed-multiplier: 1;
	/*	--color-background-graystyle: #3c3c3c;*/
	/*	--color-font-graystyle-base: #bfbfbf;*/
}


/*
/*
/******************************************************************
 **       Global Elements                                        **
 ******************************************************************/

::selection {

}

.prevent-animation {
	transition: none !important;
}

/*#test-overflow {*/
/*	display: none;*/
/*}*/

button {
	appearance: none;
	font-size: inherit;
	font-family: inherit;
	font-style: inherit;
	font-variant-ligatures: inherit;
	font-variant-caps: inherit;
	font-variant-numeric: inherit;
	font-variant-east-asian: inherit;
	font-weight: inherit;
	font-stretch: inherit;
	color: inherit;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	box-sizing: border-box;
	background: none;
	border: none;
	border-radius: 0.5rem;
}

small {
	opacity: var(--object-opacity-weakness);
}

a {
	color: var(--color-font-base-link);
	text-decoration: none;
	transition:
			color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier)),
			background-color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier));
	border-radius: 0.3rem;
}

a:hover {
	color: var(--color-font-base-link-hover);
}

a:visited {
	color: var(--color-font-base-link-visited);
}

a:visited:hover {
	color: var(--color-font-base-link-visited-hover);
}

a:focus-visible {
	background-color: var(--color-font-base-link-focus-bg);
	outline: none;
}

a.no-style {
	color: inherit;
	text-decoration: inherit;
}

a.no-style:hover,
a.no-style:visited,
a.no-style:visited:hover {
	color: inherit;
	border-radius: inherit;
	transition: inherit;
}

a.no-style:focus-visible {
	background-color: inherit;
}


h1 {
	font-size: 2.2rem;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-sans-serif);
}


/*
/*
/******************************************************************
 **       root item                                              **
 ******************************************************************/
body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	color: var(--color-font-base);
	display: flex;
	position: relative;
}


/*
/*
/******************************************************************
 **       sidebar                                                **
 ******************************************************************/
#nav-container {
	width: 0;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
	transition: width calc(var(--sidebar-toggle-anima-speed) * var(--animation-speed-multiplier));
}

#nav-container.show-sidebar {
	width: min(calc(var(--sidebar-width) + var(--sidebar-margin-width) * 2), 100vw);
}

#sidebar {
	width: min(var(--sidebar-width), 100vw);
	padding: var(--sidebar-margin-height) var(--sidebar-margin-width);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	font-size: var(--sidebar-font-size);
	font-weight: bold;
	display: flex;
	flex-direction: column;
	color: var(--color-font-sidebar);
	overflow: hidden;
	z-index: 99;
}

#sidebar .sidebar-card {
	background: var(--color-sidebar-background);
	border-radius: var(--sidebar-radius);
	overflow: hidden;
}

#sidebar .sidebar-card:not(:last-child) {
	margin-bottom: 1rem;
}

#sidebar > #noscript-warn {
	flex-shrink: 0;
	padding: 1rem;
	border-radius: 0.5rem;
	background: var(--color-warn-noscript);
	color: var(--color-font-warn-noscript);
	z-index:15;
}

#sidebar > #site-title {
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
	font-style: normal;
	background: var(--color-sidebar-sitetitle-background);
	color: var(--color-font-sidebar-sitetitle);
	/*transition:*/
	/*		color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier)),*/
	/*		background calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier));*/
	border-radius: 0.5rem;
	z-index:10;
}

#sidebar > #site-title:hover {
	/*background: var(--color-font-sidebar-sitetitle);*/
	/*color: var(--color-font-sidebar-sitetitle-highlight);*/
	/*background: var(--color-font-sidebar-sitetitle-highlight);*/
	text-decoration: underline;
}

#sidebar > #site-title + *,
#sidebar > noscript#noscript-warn + * {
	margin-top: -1rem;
	border-width: 0;
	border-top: 1rem;
	border-style: solid;
	border-color: #ffffff00;
}

#sidebar > .menu-container {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}

#sidebar > .menu-container:last-child {
	flex-grow: 1;
}

#sidebar > .menu-container::-webkit-scrollbar {
	width: 2px;
	background: none;
}

#sidebar > .menu-container::-webkit-scrollbar-thumb {
	 background: var(--color-scrollbar-sidebar-background);
 }

#sidebar > .menu-container:hover::-webkit-scrollbar-thumb {
	background: var(--color-scrollbar-sidebar-foreground);
}

#sidebar > .menu-container::-webkit-scrollbar-track {
	background: var(--color-scrollbar-sidebar-background);
}

#sidebar > .menu-container > .menu {
	padding: var(--sidebar-menu-container-padding-height) var(--sidebar-menu-container-padding-width);
	padding-right: 0;
	position: relative;
}

#sidebar > .menu-container > .menu:not(:first-child):before {
	content: "";
	position: absolute;
	top: 0;
	right: calc((100% - var(--sidebar-menu-list-seperator-length))/2);
	left: calc((100% - var(--sidebar-menu-list-seperator-length))/2);
	transform: translate(0, -50%);
	height: var(--sidebar-menu-list-seperator-width);
	border-radius: calc(var(--sidebar-menu-list-seperator-width) / 2);
	background: var(--color-menu-list-separator);
}

#sidebar > .menu-container > .menu:nth-last-child(2) {
	flex-grow: 1;
}

#sidebar > .menu-container > .menu .menu-item {
	display: block;
	padding: 0.55rem 0;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	transition: color calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier));
}

#sidebar > .menu-container > .menu .menu-item:hover {
	color: var(--color-font-menu-item-hover);
}

#sidebar > .menu-container > .menu .menu-item.current {
	color: var(--color-font-menu-item-current) !important;
}

#sidebar > .menu-container > .menu .menu-item.current:after {
	content: "";
	position: absolute;
	top: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
	bottom: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
	right: calc(var(--sidebar-menu-item-indicator-active-width));
	width: var(--sidebar-menu-item-indicator-active-width);
	border-radius: calc(var(--sidebar-menu-item-indicator-active-width) / 2);
	background: var(--color-menu-item-indicator-current);
}

#sidebar > .menu-container > .menu .menu-item:before {
	content: "";
	position: absolute;
	transition: top calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier)),
				bottom calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier));
	top: 50%;
	bottom: 50%;
	left:calc(0px - var(--sidebar-menu-item-indicator-focus-width) * 2);
	width: var(--sidebar-menu-item-indicator-focus-width);
	border-radius: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
	background: var(--color-menu-item-indicator-focus);
}

#sidebar > .menu-container > .menu .menu-item:focus-visible{
	color: var(--color-font-menu-item-hover);
	outline: none;
}

#sidebar > .menu-container > .menu .menu-item:focus-visible:before {
	top: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
	bottom: calc(var(--sidebar-menu-item-indicator-focus-width) / 2);
}

#sidebar > .menu-container > .menu .menu-item-parent > *:first-child:after {
	content: "▸";
	color: var(--color-font-base-link);
	display: inline-block;
	margin-left: 0.5rem;
	transition: transform calc(var(--sidebar-menu-item-parent-arrow-anima-speed) * var(--animation-speed-multiplier));
}

#sidebar > .menu-container > .menu .menu-item-parent.active > *:first-child:after {
	transform: rotate(90deg);
}

#sidebar > .menu-container > .menu .menu-item-parent > .children {
	padding-left: var(--sidebar-menu-item-indent-width);
	border-style: solid;
	border-width: 0;
	border-color: var(--color-menu-child-list-line);
	border-left-width: 1px;
	overflow: hidden;
	display: none;
	transition: height calc(var(--sidebar-menu-item-children-anima-speed) * var(--animation-speed-multiplier)) ease-in-out;
}

#sidebar > .menu-container > .menu .menu-item-parent.active > .children {
	display: block;
}

#sidebar > .menu-container > .menu#menu-metas > .menu-item-parent > *:first-child {
	position: relative;
	/*text-decoration: underline;*/
}

#sidebar > .menu-container > .menu#menu-metas > .menu-item-parent > *:first-child:after {
	position: absolute;
	left: 0;
	margin-left: -1rem;
	color: inherit;
}

#sidebar > .menu-container > .menu#menu-metas > .menu-item-parent > .children {
	padding-left: 0;
	border-left-width: 0;
}


/*
/*
/******************************************************************
 **      page header                                             **
 ******************************************************************/
#main {
	color: var(--color-font-base);
	margin: 0 var(--main-margin-width);
	flex-grow: 1;
	overflow: auto;
	position: relative;
	scroll-behavior: smooth;
}

#main > #main-heading {
	padding-top: var(--main-margin-height);
	position: sticky;
	top: 0;
}

#main::-webkit-scrollbar {
	width: var(--main-scrollbar-width);
	border-radius: calc(var(--main-scrollbar-width) / 2);
	background: none;
}

#main::-webkit-scrollbar-thumb {
	width: var(--main-scrollbar-width);
	border-radius: calc(var(--main-scrollbar-width) / 2);
	background: var(--color-scrollbar-main-foreground);
}

#main::-webkit-scrollbar-track {
	width: var(--main-scrollbar-width);
	border-radius: calc(var(--main-scrollbar-width) / 2);
	background: var(--color-scrollbar-main-background);
	margin: var(--main-margin-height);
}

#page-tools {
	color: var(--color-font-tools-button);
	/*background-color: #ffffff;*/
	border-radius: 0.5rem;
	font-size: var(--tools-font-size);
	font-weight: bold;
	z-index: 100;
}

#page-tools > button {
	background-color: var(--color-tools-button-background);
	padding: 0;
	height: 2.2rem;
	width: 2.2rem;
	transition: background-color var(--tools-button-hover-anima-speed);
	user-select: none;
}

#page-tools > button:hover {
	background-color: var(--color-tools-button-background-active);
}



/*
/*
/******************************************************************
 **      page content                                            **
 ******************************************************************/
#article {
	margin: var(--article-margin-top) auto var(--article-margin-bottom);
	padding: var(--article-padding-height) var(--article-padding-width);
	padding-right: calc(var(--article-padding-width));
	max-width: var(--article-width-max);
}