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

.backup-header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}

.backup-header h1 {
	margin: 0 0 .45rem;
}

.backup-header p {
	margin: .2rem 0;
	line-height: 1.4;
}

.backup-header-actions {
	display: flex;
	gap: .5rem;
	align-items: center;
	flex-wrap: wrap;
}

.backup-note,
#backup-status {
	font-size: .9rem;
}

/*
	`--nav-background-color` and `--text-color` resolve to the same colour in
	the light theme (both #464b51), so `.secondary` was painting near-black
	text on a near-black background -- an unreadable block where a button
	should be. `--foreground-color` is the token defined to contrast with
	`--text-color` in both themes, and the accent is the same yellow in both,
	so its ink is the one the header already uses on it.
*/
#backup-now,
.backup-action {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: .5rem .7rem;
	background: var(--accent-color);
	color: var(--header-color);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

#backup-now:disabled,
.backup-action:disabled {
	opacity: .55;
	cursor: default;
}

.backup-action.secondary {
	background: var(--foreground-color);
	color: var(--text-color);
}

.backup-action.secondary:hover:not(:disabled) {
	border-color: var(--accent-color);
}

.backup-action.danger {
	background: var(--error-color);
	color: #fff;
}

#backup-status {
	min-height: 1.25rem;
	margin: .8rem 0;
}

.backup-schedule {
	display: flex;
	align-items: end;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 1rem 0;
	padding: .9rem 1rem;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background: var(--foreground-color);
}

.backup-schedule h2 {
	width: 100%;
	margin: 0;
	font-size: 1rem;
}

.backup-schedule label {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	font-size: .85rem;
}

.backup-schedule input {
	width: 7rem;
	min-height: 2.3rem;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: .45rem .65rem;
	font: inherit;
	background: var(--background-color);
	color: var(--text-color);
}

.backup-schedule .backup-hint {
	flex-basis: 100%;
	margin: 0;
	font-size: .85rem;
	color: var(--dimmed-text-color);
}

.backup-table-wrap {
	overflow: auto;
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

.backup-table {
	width: 100%;
	border-collapse: collapse;
}

.backup-table th,
.backup-table td {
	padding: .55rem .65rem;
	text-align: left;
	border-bottom: 1px solid var(--border-color);
	vertical-align: middle;
}

.backup-table tr:last-child td {
	border-bottom: 0;
}

.backup-actions {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
}

#backup-empty {
	padding: 2rem;
	text-align: center;
}

.restore-help {
	margin-top: 1.25rem;
	max-width: 60rem;
	line-height: 1.45;
}

.restore-help h2 {
	margin-bottom: .35rem;
}

@media (max-width: 700px) {
	.backup-header {
		align-items: stretch;
		flex-direction: column;
	}

	.backup-header-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.backup-header-actions > * {
		text-align: center;
	}

	.backup-table th:nth-child(3),
	.backup-table td:nth-child(3) {
		display: none;
	}
}