/* ----- MAIN ----- */

main {
	width: fit-content;
	display: grid;
	padding-top: 3rem;
	flex-grow: 1;
	grid-gap: 0.375rem;
}

.corpus-col {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 3rem);
}

.corpus-title {
	padding: 0.5rem;
	display: flex;
	align-items: center;
	color: var(--color--white);
	text-align: center;
	font-size: 1.5rem;
}

.corpus-name {
	flex-grow: 1;
}

.dir-btn {
	width: 2rem;
}

.corpus-dir {
	flex-shrink: 0;
	max-height: 20rem;
	padding: 0.375rem;
	margin-bottom: 0.375rem;
	overflow-y: scroll;
	background-color: var(--color--white);
}

.dir-item {
	display: flex;
	align-items: center;
}

.dir-name {
	margin-left: 0.375rem;
	padding: 0.25rem;
	border-radius: 0.25rem;
	flex-grow: 1;
}

.dir-name:hover {
	background-color: var(--color--blue-lighter);
	cursor: pointer;
}

.corpus-content {
	padding: 0.375rem;
	overflow-y: scroll;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	grid-gap: 0.25rem;
	background-color: var(--color--white);
}

/* ----- TITLE BLOCK ----- */

.title-block {
	padding: 0.25rem;
	display: grid;
	grid-template-columns: auto 2rem;
	align-items: center;
	color: var(--color--white);
	background-color: var(--color--blue-dark);
	font-size: 1.125rem;
	text-align: center;
	border-radius: 0.25rem;
}

.title-block.alignable:hover {
	background-color: var(--color--blue-darker);
	cursor: pointer;
}

.title-block.highlight {
	background-color: gold;
	color: inherit;
}

.title-block.target {
	background-color: #6BB57B;
}

.title-block.target:hover {
	background-color: #66AD76;
}

.title-block.target.read {
	background-color: #E58A8E;
}

.title-block.target.read:hover {
	background-color: #DE858A;
}

/* ----- META BLOCK ----- */

.meta-block {
	padding: 0.5rem;
	background-color: var(--color--blue);
	border-radius: 0.25rem;
}

.meta-table {
	display: flex;
	flex-direction: column;
}

.meta-row {
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
}

.meta-name {
	padding: 0.125rem;
	border-radius: 0.25rem;
	color: var(--color--white);
	background-color: var(--color--blue-dark);
}

/* ----- TEXT BLOCK ----- */

.text-block {
	padding: 0.5rem;
	background-color: var(--color--blue-lighter);
	border-radius: 0.25rem;
}

.text-block.alignable:hover {
	background-color: var(--color--blue-light);
	cursor: pointer;
}

.text-block.highlight {
	color: var(--color--white);
}

.text-block.target {
	background-color: #D5F7D5;
}

.text-block.target:hover {
	background-color: #CCF0CC;
	cursor: pointer;
}

.text-block.target.read {
	background-color: #F7D1C9;
}

.text-block.target.read:hover {
	background-color: #F0CAC2;
	cursor: pointer;
}

.term-in-text {
	margin-bottom: 0.25rem;
}

.term-in-text span {
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
}

.searched {
	margin: 0.125rem;
	padding: 0.125rem;
	color: var(--color--white);
	background-color: indianred;
	font-weight: bold;
	border-radius: 0.25rem;
}

/* ----- VISIBILITY ----- */

.corpus-col,
.dir-btn i.fa-folder,
.dir-btn.open i.fa-folder-open,
i.fa-angle-double-up,
.open i.fa-angle-double-down {
	display: none;
}

.dir-btn.open i.fa-folder,
.dir-btn i.fa-folder-open,
.open i.fa-angle-double-up,
i.fa-angle-double-down {
	display: block;
}

.corpus-col.target {
	display: flex;
}