.title {
	font-size: var(--font-sm);
	font-weight: var(--weight-bold);
	overflow-wrap: anywhere;
}

.partial {
	font-size: var(--font-2xs);
	color: var(--color-text-high);
}

.scanning {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

/* the bar's column is fixed by the grid, so the numbers changing width beside it never resize it */
.progressRow {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--s-1) var(--s-3);
}

.progress {
	width: 100%;
	height: 8px;
	accent-color: var(--color-text-accent);
}

.progressText {
	grid-column: 2;
	font-size: var(--font-2xs);
	color: var(--color-text-high);
	font-variant-numeric: tabular-nums;
}

.previewRow {
	display: grid;
	grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
	gap: var(--s-4);
	align-items: start;
}

.preview {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius-box);
	border: var(--border-width) solid var(--color-bg-high);
}

.previewNotes {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--font-2xs);
	color: var(--color-text-high);
}

.afterScan {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-3);
	font-size: var(--font-2xs);
	color: var(--color-text-high);

	&:empty {
		display: none;
	}
}

.errorBox {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius-box);
	background: var(--color-error-low);

	& p {
		margin: 0;
	}
}

.error {
	font-size: var(--font-xs);
	color: var(--color-error);
}

.fileButton {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	height: var(--field-size-sm);
	padding: 0 var(--field-padding);
	border: var(--border-style-accent);
	border-radius: var(--radius-field);
	background: var(--color-text-accent);
	color: var(--color-text-inverse);
	font-size: var(--font-xs);
	font-weight: var(--weight-bold);
	cursor: pointer;

	& input {
		display: none;
	}
}

.telemetry {
	font-size: var(--font-2xs);
	color: var(--color-text-high);

	& summary {
		cursor: pointer;
	}

	& table {
		margin-top: var(--s-1-5);
		border-collapse: collapse;

		& th,
		& td {
			padding: var(--s-0-5) var(--s-2-5) var(--s-0-5) 0;
			text-align: right;
			font-variant-numeric: tabular-nums;

			&:first-child {
				text-align: left;
			}
		}
	}
}

@container scanner (width < 600px) {
	.previewRow {
		grid-template-columns: minmax(0, 1fr);
	}
}