.main-window {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#discover-empty-message,
#discover-loading-message,
#discover-mode-description {
	padding: 0 0 1rem 0;
	color: var(--text-color);
}

.discover-mode-button {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: .45rem .75rem;
	background: var(--foreground-color);
	color: var(--text-color);
	cursor: pointer;
}

.discover-mode-button.active {
	background: var(--accent-color);
	color: var(--nav-color);
	border-color: var(--accent-color);
}

.table-container {
	overflow-x: auto;
}

table {
	width: 100%;
	min-width: 46rem;
	table-layout: fixed;

	color: var(--text-color);
}

th, td {
	padding: .5rem .9rem;
}

.cover-column {
	width: 4.5rem;
}

.title-column {
	overflow: auto;
}

.reason-column {
	width: 18rem;
	font-size: .9rem;
	color: var(--text-color);
}

.reason-column a {
	color: var(--text-color);
	text-decoration: none;
}

.reason-column a:hover {
	text-decoration: underline;
}

.status-column {
	width: 9rem;
}

.discover-entry > * {
	border-top: 1px solid var(--border-color);
}

.cover-column img {
	width: 3.2rem;
	aspect-ratio: 2/3;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.cover-column.no-cover img {
	display: none;
}

.cover-column.no-cover::after {
	content: '';
	display: block;
	width: 3.2rem;
	aspect-ratio: 2/3;
	border-radius: 2px;
	background-color: var(--foreground-color);
	border: 1px solid var(--border-color);
}

.title-column a {
	color: var(--text-color);
	text-decoration: none;
}

.title-column a:hover {
	text-decoration: underline;
}

.status-column a {
	display: inline-block;
	padding: .25rem .6rem;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
}

.status-column a.in-library {
	color: var(--success-color);
	border: 1px solid var(--success-color);
}

.status-column a.not-added {
	color: var(--nav-color);
	background-color: var(--accent-color);
}

@media (max-width: 700px) {
	.reason-column {
		width: 13rem;
	}
}