main {
	padding-inline: 1rem;
	color: var(--text-color);
}

#start-window {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;

	padding-bottom: 1.5rem;
}

#start-window h2 {
	margin-top: min(3vw, 2rem);

	font-size: clamp(1rem, 5vw, 2rem);
	font-weight: 500;
	text-align: center;
}

#start-window > p,
#start-window > ul {
	max-width: 50rem;
	color: var(--text-color);
}

#start-window > ul > li {
	margin-bottom: 1rem;
}

#start-window table td {
	padding: 1rem;
	padding-bottom: 0rem;
	width: 50%;
}

#start-window table td:first-child {
	text-align: right;
}

#start-window table :where(select, input) {
	min-width: 4rem;
	height: 2rem;

	border-radius: 4px;
	border: 2px solid var(--border-color);
	padding: .25rem .5rem;
	background-color: var(--foreground-color);
	color: var(--text-color);

	font-size: .9rem;

	transition: background-color 100ms linear;
}

#start-window table :where(select, input):hover {
	background-color: var(--hover-color);
}

#folder-filter-input {
	width: 100%;

	display: none;
}

#start-window table:has(#target-input option[value="false"]:checked) #folder-filter-input {
	display: block;
}

#folder-filter-error {
	margin-bottom: 1rem;
}

#run-import-button,
#continuous-back-button,
.cancel-button,
.action-container button,
#no-cv-window a {
	min-width: 5rem;

	border: 2px solid var(--border-color);
	border-radius: 4px;
	padding: .4rem .5rem;
	color: var(--text-color);
	background-color: var(--foreground-color);

	font-size: 1rem;
	text-decoration: none;

	transition: background-color 100ms linear;
}

#run-import-button:hover,
#continuous-back-button:hover,
.cancel-button:hover,
.action-container button:hover,
#no-cv-window h2:hover {
	background-color: var(--hover-color);
}

#loading-window,
#no-result-window,
#no-cv-window,
#import-error-window,
#continuous-window {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
}

#loading-window h2,
#no-result-window h2,
#no-cv-window h2,
#import-error-window h2,
#continuous-window h2 {
	font-size: clamp(1rem, 5vw, 2rem);
	font-weight: 500;
	text-align: center;
}

#import-error-window p,
#continuous-window > p {
	max-width: 50rem;
	text-align: center;
}

#continuous-progress {
	width: min(40rem, 90vw);
	height: 1.25rem;
}

.continuous-stats {
	min-width: min(30rem, 90vw);
}

.continuous-stats td {
	padding: .4rem .75rem;
}

.continuous-stats td:first-child {
	text-align: right;
	font-weight: 600;
}

.continuous-note {
	font-size: .9rem;
	text-align: center;
}

.action-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;

	padding: 1rem;
}

.import-mode-actions {
	padding-bottom: 0;
}

.table-container {
	padding: 1rem;
}

.table-container > table {
	min-width: 30rem;
	width: 100%;
}

.table-container :where(td, th) {
	padding: .5rem 1rem;
}

.table-container th {
	padding-left: 1rem;
}

.proposal-list > tr {
	transition: background-color 400ms linear;
}

.proposal-list > tr:hover {
	background-color: var(--hover-color);
}

.proposal-list td {
	border-top: 1px solid var(--border-color);
}

.proposal-list td:first-child {
	width: 3rem;
}

.proposal-list td a {
	color: var(--accent-color);
}

.proposal-list button img {
	height: 1.5rem;
}

#cv-window .window-content {
	justify-content: flex-start;
}

.search-bar {
	width: 100%;
	height: 2.5rem;

	display: flex;
	justify-content: center;
	align-items: center;
}

.search-bar > input {
	height: 100%;
	width: min(100%, 20rem);

	padding: .5rem;
	border: 2px solid var(--border-color);
	border-radius: 4px 0px 0px 4px;
	background-color: var(--background-color);
	color: var(--text-color);
}

.search-bar > input:focus {
	outline: 0;
	border-color: var(--accent-color);
	box-shadow:
		inset 0 1px 1px rgba(0, 0, 0, 0.075),
		0 0 6px var(--accent-color);
}

.search-bar > button {
	height: 100%;
	aspect-ratio: 1/1;

	padding: .6rem;
	border: 2px solid var(--border-color);
	border-left: none;
	border-radius: 0px 4px 4px 0px;
}

.search-results-container {
	padding: .5rem;
	overflow-x: auto;
}

.search-results-container table {
	min-width: 25rem;
}

.search-results-container th {
	padding-left: 1rem;
}

.search-results > tr {
	transition: background-color 400ms linear;
}

.search-results > tr:hover {
	background-color: var(--hover-color);
}

.search-results td {
	padding: .5rem 1rem;
	border-top: 1px solid var(--border-color);
}

.search-results td:last-child {
	min-width: 9rem;
}

.search-results td a {
	color: var(--accent-color);
}

.search-results button {
	border: 2px solid var(--border-color);
	border-radius: 4px;
	padding: .3rem;
	color: var(--text-color);
	background-color: var(--foreground-color);
}

/*  */
/* Which providers the match search asks */
/* A search is only as quick as its slowest provider, so the choice belongs
   next to the query rather than buried in settings. Hidden entirely when
   there is only one provider configured -- a toggle with nothing to toggle
   between is furniture. */
#match-search-providers {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	margin: .5rem 0 0 0;
	padding: .5rem .75rem;
	border: 2px solid var(--border-color);
	border-radius: 4px;
}

.provider-toggle {
	display: flex;
	align-items: center;
	gap: .35rem;
	/* Comfortable for a thumb; the label is part of the target. */
	min-height: 2rem;
	cursor: pointer;
	font-size: .9rem;
	white-space: nowrap;
}

.provider-toggle input {
	cursor: pointer;
	/* Big enough to hit on a phone, where this dialog is most often used. */
	width: 1.1rem;
	height: 1.1rem;
}