:root
{
	--placeholder:rgba(5,1,0,.35);


	--medium-type:22px;
	--medium-line:27px;

	--default-type:16px;
	--default-line:22px;

	--small-type:12px;
	--small-line:15.5px;

	--caption-type:12px;
	--caption-line:15.5px;


	--chapter-title:53px;
	--section-title:var(--medium-type);
	--section-line:var(--medium-line);
	--sub-section-title:var(--default-type);
	
	--toc-transition:.3s;
	--toc-transition-fast:.22s;

	--blur-bg:rgba(203,198,185,.4);
	--blur-bg-text:var(--dark);
	
	--editor-bg:var(--lighter);
	--editor-text:var(--dark);
	--editor-menu-bg:rgba(233,231,226,.85);
	--view-bg:rgba(233,231,226,1);
	
	--grid-aspect:calc(15.5 / 16.6);
	
/* 
	--pub-dark-bg:#1E1E1E;
	--pub-dark-text:var(--lighter);
 */
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--editor-bg:#1E1E1E;
		--view-bg:rgba(30,30,30,1);
		--editor-text:var(--lighter);
		--editor-menu-bg:rgba(63,58,45,.3);
		--placeholder:rgba(233,231,226,.35);
		--blur-bg:rgba(63,58,45,.3);
		--blur-bg-text:var(--lighter);
	}
	#tiptap
	{
		border-color:rgba(198,161,206,.5) !important;
	}
	.ProseMirror-selectednode
	{
	  background-color:rgba(255,255,121,.2) !important;
	}
}

@font-face {
	font-family: 'suisse_works';
	src:	/* url('fonts/SuisseWorks-Regular.otf') format('opentype'), */
				url('../shared/style/fonts/pub/suisseworks-regular-webfont.woff2') format('woff2'),
				url('../shared/style/fonts/pub/suisseworks-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'suisse_works';
	src:	/* url('fonts/SuisseWorks-Regular.otf') format('opentype'), */
				url('../shared/style/fonts/pub/suisseworks-regularitalic-webfont.woff2') format('woff2'),
				url('../shared/style/fonts/pub/suisseworks-regularitalic-webfont.woff') format('woff'); 
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'suisse_works';
	src:	/* url('fonts/SuisseWorks-Regular.otf') format('opentype'), */
				url('../shared/style/fonts/pub/suisseworks-medium-webfont.woff2') format('woff2'),
				url('../shared/style/fonts/pub/suisseworks-medium-webfont.woff.woff') format('woff'); 
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'suisse_works';
	src:	/* url('fonts/SuisseWorks-Regular.otf') format('opentype'), */
				url('../shared/style/fonts/pub/suisseworks-mediumitalic-webfont.woff2') format('woff2'),
				url('../shared/style/fonts/pub/suisseworks-mediumitalic-webfont.woff') format('woff'); 
	font-weight: bold;
	font-style: italic;
}

body
{
	background-color:var(--page-bg-tinted);
}

#home
{
	position:fixed;
	top:8px;
	left:8px;
	cursor:pointer;
	transition:transform var(--slide-in);
	z-index:1000;
}
.graph #home
{
	display:none;
}
.graph #page-editor
{
	visibility:hidden;
	pointer-events:none;
}
#page-header.off #home
{
	transform:translateX(calc(-100% - 8px));
}


#menu
{
	right:0;
}
#menu a.login
{
	margin-right:0;
}
#menu a.toggle
{
	z-index:1;
}
#menu a.toggle span
{
	display:flex;
	transition: transform var(--slide-in);
}

a.toggle
{
	overflow:hidden;
}
a.toggle span
{
	width:200%;
	height:100%;
	display:flex;
	align-items:center;
	transition: transform var(--slide-in-fast);
	pointer-events:none;
}
a.toggle span svg
{
	flex-basis:50%;
	margin:-2px 0 0 0;
}
a.toggle.on span,
a.toggle.expanded span
{
	transform:translateX(-50%);
}


#page
{
	height:100%;
}
#page-explore
{
	z-index:auto;
}
#page-graph > svg
{
	transition:opacity 1s ease 0s;
}
#page-graph.pinned > svg
{
	opacity:.5;
}
#graph-exit
{
	display:none;
}

#signin
{
	right:32px;
	position:absolute;
	display:flex;
	transition: transform var(--slide-in);
}
#menu a.toggle:not(.expanded) + #signin
{
	transform:translateX(calc(100% + 32px));
}

#signin .input-ui
{
	width:160px;
}
#signin .input-ui input
{
	width:100%;
	pointer-events:all;

}

#create
{
	position:absolute;
	left:8px;
	top:8px;
}

#toc
{
	/* background-color:rgba(250,0,0,.1); */
	width:calc(100% - 10px);
}

#publications
{
	position:fixed;
	left:8px;
	top:42px;
	width:calc(100% - 28px);

	z-index:810;
	
	pointer-events: none;
}
#publication.active
{
	min-height:100%;
	height:auto;
}

#publications.insert
{
	padding-top:72px;
	transition:padding var(--toc-transition) ease 0s;
}
#publications.insert .input-ui
{
	position:absolute;
	top:0;
	transition:top var(--toc-transition) ease 0s;
}
/* 
#publications .input-ui
{
	position:absolute;
	top:0;
}
 */
#publications > .toc
{
	padding-right:60px;
	max-height:calc(100vh - 44px - 36px);
	overflow-y:auto;
	/* background-color:rgba(250,0,0,.1); */
	pointer-events:none;
}
.toc .list-item,
.toc .list-item a,
#home
{
	pointer-events:all;
	box-shadow:0px 1px 1px 0px rgba(5,1,0,.15);
}
.toc
{
	display:flex;
	flex-direction:column;
	align-items: flex-start;

}
.toc > .label
{
	/* display:block; */
	max-width:24vw;
}
#meta .title .input-ui
{
	width:32vw;
}
.toc .part
{
	max-width:18vw;
}
.toc .chapter
{
	max-width:15vw;
}

.toc .input-ui.control
{
	margin-bottom:3px;
}
.toc .section
{
	margin-left:24px;
}
.toc .section label::before
{
	/* content:'— '; */
}
.toc .section
{
	max-width:calc(15vw - 24px);
}

.toc .subsection
{
	margin-left:48px;
}
.toc .subsection
{
	max-width:calc(15vw - 48px);
}



#page-editor:not(.editable) .toc .input-ui.control,
#page-editor:not(.editable) a.edit,
#page-editor:not(.editable) .list-item .status,
#page-editor:not(.editable) #export a:not(.full-pdf)
{
	display:none !important;
}
#page-editor:not(.editable) .list-item.object a.toggle,
#page-editor:not(.editable) .list-item.part a.toggle
{
	right:-30px;
}


.label.chapter
{
	background-color:var(--content-chapter);
}
.label.section,
.label.subsection
{
	background-color:var(--content-section);
}
.label.paragraph
{
	background-color:var(--content-paragraph);
}




.list-item
{
	position:relative;
	margin-bottom:3px;
	transition:
		opacity var(--toc-transition) ease 0s,
		height var(--toc-transition) ease 0s,
		margin var(--toc-transition) ease 0s,
		max-width .3s cubic-bezier(.23,.34,.18,1) .1s,
		backdrop-filter .1s linear 0s;
}
.list-item:not(.input-ui).active
{
	transition:none;
}

.list-item.part label:empty::after
{
	content:'Untitled part';
}
#publications > .list-item:not(.fade):not(.input-ui)
{
	transition-delay:.1s, 0s, 0s, .1s;
}
/* 
.list-item.editing
{
	color:var(--white);
}
 */

/* 
.list-item.object.insert
{
	position:absolute;
	top:0;
	transition:top var(--toc-transition) ease 0s;
	z-index:1;
}
 
.list-item.part.insert
{
	position:absolute;
	bottom:0;
	transition:bottom var(--toc-transition) ease 0s;
	z-index:1;
}
 */

.list-item.transition
{
	overflow:hidden;
}
.list-item.fade
{
	opacity:.6;

/* 
	transition:
		opacity var(--toc-transition) ease 0s,
		height var(--toc-transition) ease 0s,
		margin var(--toc-transition) ease 0s;
 */
	
}
.toc.editing .list-item:not(.editing):not(.active),
.toc.editing .list-item:not(.editing):not(.active) a,
.status.label,
.part.toc .list-item:not(.in-view):not(:hover)
/* .is-touch .part.toc .list-item:not(.in-view) */
{
	/* background-color:rgba(203,198,185,.3); */
	background-color:var(--blur-bg);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);

	color:var(--blur-bg-text);
}
.is-scroll-easing .part.toc .list-item:not(.in-view):not(:hover)
{
	backdrop-filter:none;
	transition:none;
}
.list-item
{
	cursor:pointer;
}
.list-item > label
{
	pointer-events:none;
	user-select: none;
}
.list-item > label br
{
	display:none;
}

.label.draft,
.label.locked,
.label.unlocked,
#toc:not(.view) .label.hidden
{
	padding-left:25px;
}
.button.draft
{
	padding-left:12px;
}
.label.object.draft .label.object
{
	background-color:var(--object-shade-1);
}

#toc:not(.view) .label.hidden > label::before,
/* .label.draft > label::before, */
.label.locked > label::before,
.label.unlocked > label::before,
.input-ui.draft::before,
.input-ui[class*="locked"]::before
{
	content:url('../shared/media/hidden.svg');
	position:absolute;
	left:5px;
	top:1px;
	width:18px;
	height:18px;
}
.label.locked > label::before,
.input-ui.locked::before
{
	content:url('../shared/media/locked.svg');
	top:4px;
}
.label.unlocked > label::before,
.input-ui.unlocked::before
{
	content:url('../shared/media/unlocked.svg');
	top:4px;
}
.label.locked.is-owner > label::before,
.input-ui.locked.is-owner::before
{
	content:url('../shared/media/locked-owner.svg');
}
.label.unlocked.is-owner > label::before,
.input-ui.unlocked.is-owner::before
{
	content:url('../shared/media/unlocked-owner.svg');
}
/* 
.list-item.chapter.editing.active
.list-item.chapter.editing.in-view
{
	color:var(--white);
}
 */

.list-item.object.selected:hover > a.edit,
.list-item.part:not(.editing):hover > a.toggle,
.list-item a:hover
{
	color:var(--white);
}

.list-item a:not(.toggle):hover + a.toggle
{
	color:inherit;
}

.list-item > a,
.list-item .action,
#graph-ui .label > .action
{
	position:absolute;
	top:0;
	right:-30px;
}
.list-item .edit
{
	right:-60px;
	width:30px;
}
.list-item.object a.toggle,
.list-item.part a.toggle
{
	right:-30px;
}

.list-item a.toggle svg
{
	transition:transform .3s ease 0s;
}
/* 
.list-item.part a.toggle.expanded
{
	display:block;
}
 */
.list-item a.toggle.expanded svg
{
	transform:rotate(90deg);
}


#publications > .list-item:not(.selected) a,
.list-item:not(:hover) a,
.list-item.chapter:hover a, /* no expandable chapters (yet) */
.list-item.section:hover a,
.list-item.subsection:hover a 
{
	display:none !important;
}
.list-item:hover a,
.list-item.selected a,
/* .list-item.editing:not(.chapter):not(.section):not(.subsection) a, */
.list-item.editing.part a.toggle,
#publications > .list-item:hover .duplicate
{
	display:block !important;
}

.list-item .status
{
	position:absolute !important;
	top:3px;
	left:calc(100% + 30px + 6px);
	width:auto;
	white-space:nowrap;
	
	pointer-events:none;
}


/* 
.list-item.expanded .expand,
.list-item:not(.expanded) .collapse
{
	display:none;
}
 */
/* 
.list-item.selected a.toggle
{
	display:block;
}
 */

#toc.hide .list-item:not(.editing):not(.input-ui),
#toc.hide.view .list-item, /* collapse entire toc in view mode */
.list-item.hide,
.list-item.tmp
{
	opacity:0;
	height:0;
	min-height:0 !important;
	margin-top:0 !important;
	margin-bottom:0 !important;
	overflow:hidden;
}
.list-item.tmp
{
	max-width:none !important;
}

#publications > .list-item.hide
/* #publications > .input-ui.hide */
{
	transition:
		opacity var(--toc-transition) ease 0s,
		height .5s ease .3s,
		margin-bottom .5s ease .3s;
}

.toc
{
	margin-left:20px;
}

.part.toc
{
	margin-left:8px;
	margin-left:24px;
}




#publication
{
	position:absolute;
	top:calc(42px + 15px);
	width:70vw;
	left:15vw;
	
	height:calc(100vh - 42px - 15px);
	
	border-radius: 8px 8px 0 0;
	background-color:var(--editor-bg);
	
	transition:transform var(--slide-in-pub);
	/* transition-delay: .3s; */
	
	z-index:0;
}
#publication.ease:not(.toggle):not(.off) /* smooth scrolling in webview */
{
	position:fixed;
	top:57px;
	transition:none;
}
#page.edit #publication 
{
	left:8px;
}
#page.edit .tiptap
{
	margin-left:20vw; 
}


#publication.view
{
	background-color:transparent;
	
	/* position:fixed; */
	/* width:60vw; */
}
#publication .off
{
	opacity:0;
}

#publication-cover
{
	position:relative;
	margin-bottom:var(--view-spacing);
	height:calc(100vh - 42px - 15px - var(--view-spacing) - 28px);
	border-radius:8px;
}
#publication-cover img.page
{
	position:relative;
	margin-left:50%;
	transform:translateX(-50%);
	width:auto;
	height:100%;
	aspect-ratio:160/230;
	object-fit: cover;
	background-repeat:no-repeat;
	background-size: cover;
	border-radius:8px;	
}
#publication-cover .authors
{
	position:absolute;
	left:50%;
	bottom:30px;
}
#publication-cover .authors a
{
	display:inline-block;
	margin:3px;
}

#publication.toggle
{
	transition:left var(--slide-in-pub);
	transition:
		left .4s ease .1s,
		width .4s ease .1s;
}
#publication-view-toggle
{
	position:fixed;
  top:42px;
  right:calc(15vw - 8px + 20px);
  z-index: 900;	
}
#publication-view-toggle.cover,
#publication-view-toggle:not(.editing) .view,
#publication-view-toggle.editing .edit
{
	display:none
}
#page.edit #publication-view-toggle
{
	right:calc(30vw - 8px + 20px);
}

#publication.empty #tiptap
{
	display:none;
}
#publication.empty::after
{
	content:attr(data-placeholder);
	position:absolute;
	left:0;
	top:40%;
	width:100%;
	text-align:center;
	color:var(--placeholder);
}


#publication.off
{
	position:fixed;
	transform:translateY(100%);
	transition-delay:0s;
}

#publication-preview
{
	position:fixed;
	right:calc(15px + 8px);
 	top:76px;

	width:calc(15% - 28px - 8px);
 	height:calc(100% - 74px); 
 	
 	background-color:var(--blur-bg);
 	border-radius:8px 8px 0 0;
 	
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	
	transition:
		width var(--slide-in-pub), 
		transform var(--slide-in-pub);
 	
 	z-index:800;
}
#page.edit #publication-preview
{
	width:calc(30% - 23px - 16px);
}

#publication-preview.resize
{
	transition:none;
}
#publication-preview iframe
{
	width:100%;
	height:100%;
}
#publication-preview.edit iframe
{
	width:calc(100% - 400px - 8px);
}
#publication-preview.resize iframe
{
	pointer-events:none;
}
#publication-preview-resize
{
	position:absolute;
	left:-15px;
	top:calc(50% - 15px);
	
	cursor:col-resize;
	
	z-index:801;
}
#publication-preview.off
{
	transform:translateX(calc(100% + 60px));
}

#export
{
	position:absolute;
	left:0;
	top:0;
	top:-33px;
	width:100%;
	display:flex;
	/* flex-wrap: wrap; */
	justify-content: flex-end;
}
#export a
{
	margin:6px 6px 0 0;
	max-width:calc(100% - 12px);
	cursor:pointer;
}
#export a.refresh
{
	margin-right:0;
}
.empty #export a.part-pdf,
#publication-preview.cover a.part-pdf
{
	display:none;
}

#toc
{
	position:relative;
	margin-left:10px;
}

a.download:not(.processing) label::before
{
	content:url('../shared/media/download.svg');
	vertical-align: top;
  margin-right: 5px;	
}



/* meta */

.page.meta
{
  position: fixed;
  background: rgba(5,1,0,.3);
  backdrop-filter: blur(10px);

  z-index:1100;
  transition:opacity .3s ease 0s;
  
  overflow-y:auto;
}
.page.meta.off
{
	opacity:0;
}
#meta
{
	margin:42px 28px;
}
#meta .title
{
	display:flex;
}
#meta .title .visibility:hover
{
	color:var(--white);
}
#meta .title .visibility.active svg:not(.hidden),
#meta .title .visibility:not(.active) svg.hidden
{
	display:none;
}
#meta .title .input-ui
{
	width:50vw;
}
#meta .input-ui input
{
	width:100%;
}
#meta .title .status
{
	margin-top:3px;
}
#meta .data,
#meta .actions,
#meta .select
{
	width:450px
}
#meta .actions
{
	display:flex;
	justify-content: space-between;
}

#confirm
{
	margin:0 6px 0 -6px;
}
#confirm:hover
{
	color:var(--white);
}
#delete
{
	position:fixed;
	left:20px;
	bottom:8px;
}


/* editor -> moved to editor.css */

/* editor menu */

.editor-menu
{
/* 
	padding:4px;
	border-radius:10px;
	box-shadow: 0 5px 20px rgba(0,0,0,.2);
	border:1px solid rgba(5,1,0,.1);
	background-color:var(--editor-menu-bg);
	backdrop-filter: blur(10px);
 */
	
	
	display:flex;
	flex-wrap:wrap;
}

.editor-menu .label
{
	margin:2px;
	box-shadow: 0px 1px 2px 0px rgba(5,1,0,.25);
}
.editor-menu .label.active
{
	color:white;
}
.editor-menu.suggestions
{
	flex-direction: column;
	align-items: flex-start;
}

.editor-menu.suggestions .label:not(.selected)
{
	/* opacity:.6; */
	background-color: var(--blur-bg);
	backdrop-filter: blur(10px);
	color: var(--blur-bg-text);
}

#editor-menu.text .label:not(.text),
#editor-menu.section .label:not(.section),
#editor-menu.paragraph .label:not(.paragraph)
{
	/* display:none; */
}

#editor-menu.section .label:not([data-type="section"]),
#editor-menu.heading .label:not([data-type="heading"]),
#editor-menu.image .label:not([data-type="image"]),
#editor-menu.image.cover .label:not(.cover),
#editor-menu.figure .label:not([data-type="image"]),
#editor-menu:not(.image):not(.figure) .label[data-type="image"],
#editor-menu.caption .label:not([data-type="text"]),
#editor-menu:not(.annotate) .label[data-type="annotate"],
#editor-menu.annotate .label:not([data-type="annotate"]),
#editor-menu.action .label:not([data-action]),
#editor-menu:not(.action) .label[data-action],
#editor-menu.cover .label:not(.cover-image),
#editor-menu:not(.cover) .label.cover-image
{
	display:none;
}

/* template editor */

#template-edit-wrapper,
#publication-preview iframe
{
	transition:width var(--slide-in-fast);
}

#template-edit-wrapper
{
	position:fixed;
	right:0;
	top:0;
	width:400px;
	height:100%;
	
	overflow:hidden;
	
	
	
/* 
	overflow-x:hidden;
	overflow-y:auto;
 */
	
}
#publication-preview:not(.edit) #template-edit-wrapper
{
	width:0;
}
#template-edit
{
	position:relative;
	width:400px;
	height:100%;
/* 
	margin:8px;
	width:calc(400px - 16px);
 */
}
#template-edit > *
{
	padding-right:16px;
}
#template-edit .template-header
{
	padding:21px 0 16px 0;
	text-align:center;
	font-size:20px;
}
#template-edit-toggle
{
	position:absolute;
	top:15px;
	right:-15px;
}
#publication-preview:not(.edit) #template-edit-toggle .close,
#publication-preview.edit #template-edit-toggle .edit
{
	display:none;
}

#template-select .label.select
{
	width:100%;
}

#template-publish
{
	position:absolute;
	left:0;
	top:calc(100vh - 74px - 30px - 18px);
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
#template-publish:not(.active) .label
{
	opacity:.5;
	pointer-events:none;
}
#template-editor
{
	height:calc(100% - 210px);
	overflow-y:auto;
}
#template-select.is-hidden + #template-editor
{
	height:calc(100% - 210px + 70px);
}

form.jf
{
	color:var(--lighter);
	
	margin:16px 0;
	font-size:14px;
	
	--row-spacing:12px;
	--col-spacing:8px;
	--accent:var(--object);
	--error:var(--yellow);
	--check:var(--dark);
}
form.jf h2
{
	margin-top:36px;
}
form.jf em.guide
{
	font-size:1em;
}


form.jf input
{
	height:auto;
/* 
	background-color:var(--lighter);
 */
}
form.jf .label
{
	padding:0;
	font-size:inherit;
	line-height: inherit;
	height:auto;
}
form.jf input,
form.jf textarea,
form.jf select,
form.jf label.input,
form.jf div.drop
{
	padding-top:5px;
	padding-bottom:5px;
	font-size:15px;
}
form.jf input[type="number"]:disabled
{
	-moz-appearance:textfield;
}

form.jf div.check
{
	padding:0 .375em;
}
form.jf div.check label
{
	padding-left:.375em;
}
form.jf div.check .checkbox
{
	top:.4em;
	width:15px;
}
form.jf svg.icon.locked
{
	top:34px;
}



/* small screen layout (read only) */

@media (max-width:800px)
{

	#page-graph
	{
	}
	#home
	{
		position:fixed;
		left:8px;
		top:8px;
	}
	#menu
	{
		right:0;
		display:none;
	}
	#menu a.toggle:not(.expanded) + #signin {
		transform: translateX(calc(100% + 78px));
	}
	#menu a.toggle span svg
	{
		transform:rotate(-90deg);
		margin:0;
	}
	
	.tiptap
	{
		overflow:hidden !important;
	}
	
	
	.toc
	{
		margin-left:8px;
/* 
		padding-left:10px;
 */
		border-radius: 8px;
	}
	
	.toc > .label
	{
		max-width:calc(100vw - 16px - 30px - 8px);
	}
	.toc > .part
	{
		max-width:100%;
	}	
	
	.part.toc
	{
		margin-left:8px;
	}
	
	#publications > .toc
	{
		padding-right:30px;
	}
	
/* 
	#toc > .list-item.part:last-of-type
	{
		margin-bottom:0;
	}
 */
	
	.part.toc .list-item
	{
		backdrop-filter:none !important;
		-webkit-backdrop-filter:none !important;

	}
	
	
	
	#toc
	{
		margin-left:8px;
		/* margin-top:-3px; */
		width:calc(100% - 16px);
		/* padding:0 3px; */
		background-color: var(--view-bg);
		
		pointer-events:all !important;
		overflow-x:hidden !important;
/* 
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
 */
		/* background-color:rgba(0,0,0,.8); */
	}
	
	#toc > .label:first-child
	{
		/* margin-top:3px; */
	}

	#publication
	{
		width:calc(100vw - 16px);
		left:8px;
		overflow:hidden;


	}
	
	#page-editor,
	#publications
	{
		overflow:hidden;
	}
	
	#publications
	{
		width:calc(100vw - 16px - 8px);
	}
	


	.graph-controls,
	.tiptap > h2::after
	{
		display:none;
	}
	
	#publication-cover
	{
		margin-top:19px;
		height:auto;
		aspect-ratio:160/230;
	}
	#publication-cover img.page
	{
		position:absolute;

		margin:0;
		transform:none;
		width:100%;
		height:auto;
	}	
	
	
	#publication-cover .authors
	{
		left:calc(16px - 3px);
	}

 
	
	#publication-preview
	{
		display:none;
	}

}