@import url("common.css");

/* Content gap page styles */

.form-container {
	& .depth-input {
		width: 5rem;
	}
}

/* Results section */
.main {
	padding: 1.5rem;
	overflow-y: auto;
	align-items: start;
}

#content-gap-results {
	width: 100%;
}

.results-header {
	margin-bottom: 1.5rem;

	& h2 {
		font-size: var(--font-size-xl);
		font-weight: 600;
		margin-bottom: 0.4rem;

		& em {
			font-style: normal;
			color: var(--color-progressive);
		}
	}

	& .results-meta {
		font-size: var(--font-size-sm);
		color: var(--color-subtle);
	}
}

/* Wiki results table */
.wiki-results {
	width: 100%;
}

.wiki-results-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);

	& thead th {
		text-align: left;
		padding: 0.5rem 0.75rem;
		font-weight: 600;
		border-bottom: 2px solid var(--border-color-base);
		color: var(--color-subtle);
		white-space: nowrap;
	}

	& tbody tr {
		border-bottom: 1px solid var(--border-color-base);

		&:hover {
			background: var(--background-color-interactive-subtle, transparent);
		}
	}

	& tbody td {
		padding: 0.6rem 0.75rem;
		vertical-align: middle;
	}

	& .wiki-code {
		font-family: var(--font-family-monospace);
		font-weight: 700;
		white-space: nowrap;
	}

	& a {
		color: var(--color-progressive);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

/* Compare-with row — last row in tbody */
.compare-with-row td:first-child {
	padding: 0.5rem 0.75rem;
}

.compare-with-select {
	min-width: 16rem;
}

/* Article count chart dialog */
#article-count-chart-dialog {
	border: none;
	border-radius: var(--border-radius-large, 0.5rem);
	padding: 0;
	width: min(90vw, 720px);
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
	margin: auto;
	resize: both;

	&::backdrop {
		background: rgba(0, 0, 0, 0.5);
	}

	& .dialog-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.25rem 0.75rem;

		& h2 {
			font-size: var(--font-size-large, 1.125rem);
			font-weight: 600;
			margin: 0;
		}
	}
}

#article-count-chart {
	width: 100%;
	height: 380px;
	padding: 0.75rem;
	box-sizing: border-box;
}